组件的通信

父组件向子组件通信

props方式 加属性绑定

//这是html 模板
  <div id="app">
         // 1.使用自定义属性绑定父组件传过来的数据
        <temp-div :msg='msg'></temp-div>
    </div>

//子组件  
Vue.component('temp-div', {
     // 2.用props 来接收 父组件传过来的数据
        props: ['msg'],
        template: `
        <div>
        <div>{{msg}}</div>
        </div>
        `,

    })

//父组件
var app = new Vue({
        el: '#app',
        data: {
            msg: '我是父组件的数据'
        }
    })

注意

1. props是一个数组可以接受多个数据
2. 在props中使用驼峰形式, 模板中需要使用短横线的形式 因为 HTML 对大小写不敏感, 所以使用短横线的形式
3. 字符串形式的模板中没有这个限制
4. props的值可以传递 字符串（String）、数值（Number）、布尔值（Boolean）、数组（Array）、对象（Object）
5. props是单向数据流只能是父组件传向子组件

子组件向父组件通信

$emit

语法：

1. 子组件通过自定义事件向父组件传递信息

// 子组件
Vue.component('menu-item', {
        data: function() {
            return {
                re: '子组件的数据'
            }
        },
        template: `
        <div>
           //         这是自定义事件名称   这是要发给父组件的数据
          <button @click='$emit("enlarge-text", re)'>
            传递数据         
            </button>
        </div>
      `
    });

在模板里定义一个点击事件用 $emit("自定义事件名称"，传递的数据)

2. 父组件监听自定义事件

//           自定义事件名    处理函数
<menu-item  @enlarge-text='handle'></menu-item>

3. 父组件接受传过来的数据

   // 父组件
    var vm = new Vue({
               el: '#app',
               methods: {
                //这就是第二步的处理函数 用函数携带参数的形式就接受到了
                   handle: function(val) {
                       console.log(val);
                   }
               }
           });
   

兄弟组件之间通信

事件中心方式通信

1. 设置事件中心

    // 提供事件中心
    var hub = new Vue();

2. A组件通过自定义事件向事件中心传递信息

//  组件A
template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>`,
      methods: {
        handle: function(){
           //     传递给事件中心  2是传递的数据
          hub.$emit('A-event', 2);
        }
      },

3. 钩子函数监听

// 组件B  用mounted钩子函数监听
mounted: function() {
        // 监听事件          val是A组件传过来的
        hub.$on('A-event', (val) => {
          this.num = val;
        });