浅析vue中的组件通信

为了方便展示，所有的组件都是以单文件组件的方式编写的

1. 父组件对子组件通信

在父组件内使用v-on绑定自定义事件，在子组件内使用props传递自定义的事件名称

如下是父组件

<template>
  <div id="app">
    <child :message="title"/>
    <!--使用v-on绑定自定义事件-->
  </div>
</template>

<script>
  import Child from './components/Child' // 导入子组件

  export default {
    name: 'App',
    components: {Child}, // 注册子组件
    data() {
      return {
        title: '父组件向我传递了信息'
      }
    }
  }
</script>

如下是子组件

<template>
  <div id="app">
    {{message}}
  </div>
</template>

<script>
  export default {
    props: ['message'] // 使用props传递数据
  }
</script>

<!--more-->

2.子组件对父组件通信

子组件对父组件通信我们只能通过自定义事件去进行触发，而无法像父对子通信那样直接进行数据传递

首先我们必须了解Vue暴露两个实例方法

• vm.$emit( event, […args] )，触发当前实例上的事件，附加参数都会传给监听器回调
• vm.$on( event, callback )，监听当前实例上的自定义事件，事件可以由vm.$emit触发，回调函数会接收所有传入事件触发函数的额外参数

总结一下：我们用$on去监听一个**自定义事件**，这个自定义事件由$emit触发，触发的同时将data放在附加参数里，传给$on接收

如下是父组件

<template>
  <div id="app">
    <child v-on:receiveData="consoleData"/>
    <!--监听自定义事件receiveData，监听到之后触发consoleData获取子组件传递的数据-->
  </div>
</template>

<script>
  import Child from './components/Child' // 导入子组件

  export default {
    name: 'App',
    components: {Child}, // 注册子组件
    methods: {
      consoleData(data) {
        // 这里的参数是由$emit传递来的数据
        console.log(data) // ["子组件向我传递信息啦", "测试"]
      }
    }
  }
</script>

如下是子组件

<template>
  <div id="app">
    <button @click="transData">点我，向父组件传递数据</button>
    <!--绑定transData事件，以便执行器内部的$emit-->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: '子组件向我传递信息啦',
        title: '测试'
      }
    },
    methods: {
      transData() {
        // 触发自定义事件receiveData，将数据传递给父组件
        this.$emit('receiveData', [this.message, this.title])
      }
    }
  }
</script>

3.兄弟组件之间进行通信

主要我们通过全局注册一个eventBus单文件组件，这个组件的作用充当着vm.$emit( event, […args] )里的vm，其它形式与第二小节类似，不作过多说明了

新建一个js文件，作为EventBus

import Vue from 'vue' // 导入vue模块

export default new Vue({}) // 新建一个空的vue实例作为EventBus

如下是父组件

<template>
  <div id="app">
    <!--两个子组件-->
    <child1/>
    <child2/>
  </div>
</template>

<script>
  import Child1 from './components/Child' // 导入子组件1
  import Child2 from './components/child2' // 导入子组件2

  export default {
    name: 'App',
    components: {Child1, Child2}// 注册两个子组件
  }
</script>

如下是子组件1

<template>
  <div>
    <button @click="transData">点我，向兄弟组件Child2传递数据</button>
    <!--绑定transData事件，以便执行器内部的$emit-->
  </div>
</template>

<script>
  import eventBus from './EventBus' // 导入EventBus

  export default {
    data() {
      return {
        message: 'Child2，你好呀',
        title: '测试'
      }
    },
    methods: {
      transData() {
        // 通过EventBus触发自定义事件receiveData，将数据传递给Child2组件
        eventBus.$emit('receiveData', [this.message, this.title])
      }
    }
  }
</script>

如下是子组件2

<template>
  <div>
    <h1>我的兄弟组件Child1向我传递了信息：{{message}}</h1>
    <!--绑定transData事件，以便执行器内部的$emit-->
  </div>
</template>

<script>
  import eventBus from './EventBus' // 导入EventBus

  export default {
    data() {
      return {
        message: ''
      }
    },
    created() {
      eventBus.$on('receiveData', data => {
        // 注意这里使用箭头函数是因为需要将this绑定父级的context，否则this指向eventBus
        this.message = data
      })
    }
  }
</script>