Vue组件通信的基本使用

1、父子通信 - 通过prop 向子组件传递数据

使用props传递数据作用域是孤立的，它是父组件通过模板传递而来，想接收到父组件传来的数据，可以通过props选项来进行接收。

父组件

<template>
   <div>
      <demo :msg='msgData' :math = 'mathData'></demo>
   </div>
</template>
<script>
import Demo from './Demo.vue'
   export default {
     data () {
       return  {
          msgData:'从父组件接收来的数据',
          mathData : 2
       }
     },
     components : {
       Demo
     }
   }
</script>

子组件

<template>
  <div>
     <p>{{msg}}</p>
     <p>{{math}}</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  props: ['msg' , 'math'],
}
</script>

在子组件中需要通过显示定义好需要从父组件中接收那些数据。

同样的在父组件中在子组件模板中过v-bind来传递子组件中需要显示接收的数据。

语法： ：== v-bind(是封装的语法糖) ：msg = msgData

• msg第一个参数必须要与子组件的props同名
• msgData则是父组件中需要向子组传递的数据

props可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。

在 data 选项中，当前实例（当前组件中改动）可以任意改变data选项里的数据，Vue传递数据时是基于数据单向流动，子组件不能改变当前实例中的 props 任何属性，需要通知父组件改变相应的值，重新改变。

2、父子通信 - 通过$emit和$on向父组件传递数据

父组件使用 $on(eventName) 监听事件

<template>
   <div>
      <demo @listen = 'getMsg'></demo>
   </div>
</template>
<script>
import Demo from './Demo.vue'
   export default {
     data () {
       return  {
          msg: ''
       }
     },
     components : {
       Demo
     },
     methods : {
      getMsg (data) {
         this.msg = data
      }
     }
   }
</script>

子组件使用 $emit(eventName) 触发事件

<template>
   <div>
      <demo @click = 'childMsg'></demo>
   </div>
</template>
<script>
import Demo from './Demo.vue'
   export default {
     data () {
       return  {
          msg: ['fish',true,{name:'vue',verison:'2.4'}]
       }
     },
     components : {
       Demo
     },
     methods : {
      childMsg () {
         this.$emit('listen', this.msg)
      }
     }
   }
</script>

3、非父子通信 - 通过eventBus传递数据

公共事件总线eventBus的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。

然后在组件中，可以使用$emit， $on， $off 分别来分发、监听、取消监听事件：

第一步：项目中创建一个js文件（我通常给它取个名字为bus.js），引入vue，创建一个vue实例，导出这个实例，代码如下（一共就两行）：

import Vue from 'Vue'
export default new Vue

第二步：在需要通信的组件中分别引入这个bus.js

import Bus from '这里是你引入bus.js的路径' // Bus可自由更换喜欢的名字

第三步：传递数据的组件里通过vue实例方法$emit发送事件名称和需要传递的数据。(发送数据组件)

Bus.$emit('click', data) // 这个click是一个自定义的事件名称，data就是你要传递的数据。

第四步：被传递数据的组件内通过vue实例方法$on监听到事件和接受到数据。（接收数据的组件）这里通常挂载监听在vue生命周期created和mounted当中的一个，具体使用场景需要具体的分析

Bus.$on('click', target => {
  console.log(target)　　//　注意：发送和监听的事件名称必须一致，target就是获取的数据，可以不写target。只要你喜欢叫什么都可以（当然了，这一定要符合形参变量的命名规范）
})

通过以上的四步其实就已经实现了最简单的eventbus的实际应用了。

但是到这儿后，一定要注意一个最容易忽视，又必然不能忘记的东西，那就是清除事件总线eventBus

第五步：在vue生命周期beforeDestroy或者destroyed中用vue实例的$off方法清除eventBus

beforeDestroy () {
  bus.$off('click')
}

总结一下，这里只是介绍如何使用eventBus来解决非父子组件通信，但是当项目较大较复杂时，并不适合。到那时，vuex才是vue给我们提供的最理想的方式。

赏

谢谢你请我吃糖果