全局注册的组件可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
注意：必须在vm对象创建之前注册组件（全局组件），否则不会渲染，但是不会报语法错误。 创建组件方法①： Vue.component("bts",{ template:"<div><h1>{{this.mytitle}}</h1><p>bts</p></div>", data:function (){ return { mytitle:"防弹少年团"} }, methods:{ } }) new Vue({ el: '#app' }) 注册全局组件语法格式 Vue.component(tagName, options)参数说明：tagName：组件名，options：配置选项相当于用代替tmplate中的模板，提高程序代码复用。调用方法：<tagName></tagName>注意：组件的data属性值必须为一个函数，返回值为一个对象。只在当前的vue模型中可以使用 创建组件方法②：
var bar ={ template :"<h3>我是私有组件3</h3>"} new Vue({ el:"#app", data:{ }, components:{ "topbar":{ template:"<h1>我是私有组件1</h1>" }, navbar:{ template:"<h2>我是私有组件2</h2>" }, bar } }) bar采用的是ES6的语法。他的属性为自身，属性值为自身的值。创建组建的方法③： 组件的template传值为该模板的id。
<div id="app"> <mydiv></mydiv> </div> <template id="my"> <div>这是template模板</div> </template> <script> new Vue({ el:"#app", data:{}, components:{ mydiv:{ template:"#my" } } }) </script>注意所有的template的属性值里面必须只有一个根节点。
创建组建的方法④： 我们可以在另外一个文件编写代码，实现一个组件一个js文件，再用export暴露接口出来。
var mynav = { template: "<ul class='nav1'><li>{{sondata}}</li><li>{{sondata}}</li><li>xxx</li><li>xxx</li><li>xxx</li></ul>", data:function() { return {sondata:"我是子组件的数据"} } } export default mynav;引入JS模板文件
<script type="module"> import mynav from './src/mycom.js' console.log(mynav) new Vue({ el: "#app", data: {}, methods: {}, components: { mynav } }) </script>情况①：props是一个数组
给prop赋值时，可以是一个静态的值，也可以动态绑定值。 <div id="app"> <com1 v-bind:myhref="to_son_data" ><com1> </div> <script type="text/javascript"> var com = { template:"<div><h1>百度一下</h1><a :href='myhref'>熊掌</a></div>", props:["myhref"] } new Vue({ el: "#app", data: { to_son_data:"https://www.baidu.com" }, components: { com } }) </script>情况②：props是一个对象
props: { 'message': String, 'price': Number }因为后端取数据时规定了数据类型。props为对象时，可以更方便浏览器解析模板。 这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。
