Vue组件

一、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');