一、Vue组件注册
1、全局组件注册
语法：
Vue.component(组件名称，{
data:组件数据, //data必须是一个函数，希望形成一个闭包环境
template:组件模板内容 //template 内容必须有一个根元素,内容可以是模板字符串``
//methods
//可以实现数据的绑定、事件操作、分支、循环结构都可以，就是一个vue实例
})
注意： 1、组件就是一个vue实例
2、var app = new Vue({})；是最大的组件
2、局部组件注册
注意：1、局部组件仅限于当前注册的父组件可以使用，当前也就是Vue对象可以使用，包括局部不能被全局和其他局部使用
2、全局组件可以在任何地方使用
二、父组件向子组件传递数据
语法：
Vue.component('组件名称'，{
props:[属性1，属性2.....] //从父组件传递过来的
data:function({return{}}),
template:这里可以开始传递值
})
注意： 1、props属性名采用短横线形式
2、Html没法解析
(2) 组件传值类型
1 <body> 2 <div id="app"> 3 <params-type pstr="我是字符串" 4 :pnum="pnum" 5 :pobj="pobj" 6 :pboo="pboo" 7 :parr="parr"> 8 </params-type> 9 </div> 10 </body> 11 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 12 <script type="text/javascript"> 13 /* 字符串String typeof 检测变量数据类型 14 1、静态传参默认String 15 2、要传递以下参数需要动态绑定 16 数值Number 17 布尔值Boolean 18 数组Array 19 对象Object*/ 20 Vue.component('params-type', { 21 props: ['pstr','pnum','pboo','pobj','parr'], //接收监听父组件传递的参数 22 template: `<div> 23 <h1>{{pstr}}----->{{typeof pstr}}</h1> 24 <h1>{{pnum}}----->{{typeof pnum}}</h1> 25 <h1>{{pboo}}----->{{typeof pboo}}</h1> 26 <h1>{{typeof pobj}}</h1> 27 <h1>{{pobj.name}}</h1> 28 <h1>{{typeof parr}}</h1> 29 <ul> 30 <li v-for='item in parr'> <h1>{{item}}</h1></li> 31 </ul> 32 </div>` 33 }) 34 /* var app = new Vue({}); 是最大的组件 */ 35 var app = new Vue({ 36 el: "#app", 37 data: { 38 pnum:123456, 39 pboo: 1 > 2 ? true : false, 40 pobj:{name:'法外'}, 41 parr:['法外','老王'] 42 }, 43 methods: {} 44 }) 45 </script>
(3) 兄弟之间组件传值
语法：
1、事件中心创建：var eventHub = new Vue();
2、监听事件：eventHub.$on('eventName',param);
3、触发事件：eventHub.$emit('eventName',param);
4、销毁事件：eventHub.$off('eventName');