Vue中的组件通信

一、Vue中的组件

• 组件（Component）是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码；
• 怎么声明一个组件：

    // js
    Vue.component('my-component',{
      template: '<h1>Hello Vue.js</h1>'
    })
    var app = new Vue({
      el: '#app'
    })

    // HTML
    <div id="app">
      <my-component></my-component>
    </div>

注意：HTML 特性不区分大小写。当使用非字符串模版时，prop的名字形式会从 camelCase 转为 kebab-case（短横线隔开）。

二、父子组件通信

组件实例的作用域是孤立的；这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。但是父子组件之间需要通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。

单向数据流这是父子组件的核心概念，prop是单向绑定的。当父组件的属性发生变化的时候，会传导到子组件。但是反之，为了防止子组件无意间修改来父组件的状态，从下往上的数据流是不允许的。

如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

    // js
    Vue.component('child', {
      template: `
        <div>
          <spam>我是child</spam>
          <button>关闭</button>
        </div>
      `
    })
    new Vue({
      el: '#parent',
        data: {
          visible: false
        }
    })

    // HTML
    <div id="parent">
      <button @click="visible=true">打开</button>
      <child v-show="visible"></child>
    </div>

当点击打开按钮的时候，child将会显示出来，那要将它关闭怎么办呢？child是不能关闭自己的，因为它是否显示是由他parent决定的。我们可以通知它parent：

    // js
    Vue.component('child', {
      template: `
        <div>
          <spam>我是child</spam>
          <button @click="$emit('close')">关闭</button>
        </div>
      `
    })
    new Vue({
      el: '#parent',
      data: {
        visible: false
      }
    })

    // HTML
    <div id="parent">
      <button @click="visible=true">打开</button>
      <child v-show="visible" @close="visible=false"></child>
    </div>

这样在点击关闭按钮，会触发close事件parent会让‘visible = false’，这个时候v-show就会更新，这是响应式。

三、爷孙无法通信

在上述的列子中假设还有一个grandson

    // js
    Vue.component('child', {
      template: `
        <div>
          <spam>我是child</spam>
          <grandson></grandson>
        </div>
      `
    })
    Vue.component('grandson', {
      template: `
        <div>
          <spam>我是grandson</spam>
          <button @click="$emit('close')">关闭</button>
        </div>
      `
    })
    new Vue({
      el: '#grandpa',
      data: {
        visible: false
      }
    })

    // HTML
    <div id="grandpa">
      <child></child>
    </div>

这个时候想让grandpa（也就是上一个列子中的parent）直接关闭grandson，不可以的。要控制grandson的可见性只能让child来

    // js
    Vue.component('child', {
      props: ['showme'],
      template: `
        <div>
          <spam>我是child</spam>
          <grandson v-show="showme" @close="$emit('close')"></grandson>
        </div>
      `
    })
    Vue.component('grandson', {
      template: `
        <div>
          <spam>我是grandson</spam>
          <button @click="$emit('close')">关闭</button>
        </div>
      `
    })
    new Vue({
      el: '#grandpa',
        data: {
          visible: false
        }
    }) 

    // HTML
    <div id="grandpa">
      <button @click="visible=true">打开</button>
      <child :showme="visible" @close="visible=false"></child>
    </div>

就是说爷孙之间是无法通信的，只能一级一级的往上传，grandson告诉child我要关闭了，child监听close事件，然后再告诉grandpa，grandpa就会监听child。

四、兄弟组件通信

根据官方文档的教程，使用一个空的 Vue 实例作为事件总线

$on方法用来监听一个事件。

$emit用来触发一个事件。

    //新建一个Vue实例作为中央事件总线
    let bus= new Vue();

    //监听事件
    bus.$on('eventName', (val) => {
    //......do something
    });

    //触发事件
    bus.$emit('eventName', 'this is a message.');