10、实现Vue组件之间的通信

父组件 → 子组件

---

组件实例的作用域都是孤立的，也就是子组件在模板 template 不能引用父组件的数据，那么，当子组件有需要使用父组件的时候，我们该怎么办呢？
这里我们使用的是组件的 props 选项来声明它想要得到的数据。
首先创建一个 vue 实例：

<div id="app"></div>

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

实例 app 中含有数据 msg 值为“我是父组件的数据”，待会我们把它传递给子组件。
子组件还没有注册，接下来，我们就注册一个组件，组件名为 son。

<div id="app">
  <son></son>
</div>

Vue.component('son', {
  template: `<div></div>`
})

子组件准备好了，下一步就开始传递数据，父组件向子组件传递参数，我们说过，用组件提供的 props 选项，接下来，我们就把父组件的 msg 传给 子组件，并展示在页面上。
上面代码稍加修改：

<div id="app">
  <son :message="msg"></son>
</div>

Vue.component('son', {
  props: ['message'],
  template: `<div>{{ message }}</div>`
})

效果如下：

效果图.png

注意：props 是单向绑定的（父→子），是 vue 为了防止子组件无意修改了父组件得数据和状态，如果多个子组件任意地对父组件进行修改，这会让整个应用得数据流难以阅读。

如果你想要修改父组件传过来得数据，最好是定义一个局部的变量，来依赖传过来的数据。

子组件 → 父组件

---

相比父→子组件通信，子→父组件就稍微繁琐一点，我们会使用到组件的一个知识点：自定义事件。

每一个 vue 实例都实现了事件接口，我们可以用它提供的 API $emit(eventName) 来触发一个事件。

首先注册一个新组件：

Vue.component('son', {
  template: `<button @click="send">
                点击
             </button>`,
  methods: {
    send() {
      this.$emit('connect')
    }
  }
})

很简单的一个组件，就是一个按钮 button，点击它的时候，会触发组件内部的 send() 方法，而方法里面会触发一个事件，事件名取为：connect
然后我们就去父组件监听这个事件“connect”，监听方式跟普通原生的事件一模一样，也是用 v-on 指令，缩写用 @ 符号。我们采用缩写来监听：

<div id="app">
  <son @connect="say"></son>
</div>

我们设置了事件 connect 触发的处理程序是一个 say() 方法，我们补上 say() 方法的定义：

const app = new Vue({
  el: '#app',
  methods: {
    say() {
      console.log('大家好，我监听到了事件connect的触发')
    }
  }
})

我们在 say() 方法触发的时候，在控制台打印一句话，表示我们自定义的事件 connect() 成功触发，并被父组件监听到了。
效果如下：

效果图.png

接下来就是把子组件的数据传递给父组件。

Vue.component('son', {
  template: `<button @click="send">点击</button>`,
  data() {
    return {
      msg: '大家好，我是子组件的数据'
    }
  },
  methods: {
    send() {
      this.$emit('connect', this.msg)
    }
  }
})

我们把子组件的 data 中的 msg，通过 $emit() 一并发射出来，在父组件的 say() 方法接受即可。

methods: {
  say(msg) {
    console.log(msg)
  }
}

效果如下：

效果图.png

非父子组件通信

---

除了父子组件的相互通信，非父子关系的组件该如何通信，我们可以巧妙 地利用一个空的 vue 实例来作为一个中央事件总线。
但是在事件开发中，我们不会这么做，我们会使用专门用于状态管理的 vuex，vuex 的学习我们在后面学习。