vue 组件通信集合

时间：2020-08-05 12:26:29 收藏：0 阅读：87

父子组件通信：

1. props / $emit

2. $parent / $children

3. $ref

非父子组件通信：

1. 事件总线，利用 bus.js 传递数据，bus.$emit 与 bus.$on 传送与接收数据

// 原理上就是建立一个公共的js文件，专门用来传递消息
// bus.js     // until=>bus.js
import Vue from ‘vue‘
export defalult new Vue

// 在需要传递消息的地方引入
import bus from ‘./bus.js‘
// 传递消息
bus.$emit(‘msg‘,val)
// 接收消息
bus.$emit(‘msg‘,val=>{console.log(val)})

bus.js通信

2. $attrs / $listeners

1. 在父组件定义数据，data，然后在中转站绑定数据 :data="data"
2. 在中转站里定义 v-bind="$attrs"
3. 在子组件中通过 this.$attrs 接收数据

$attrs使用方法

3. vuex

原文：https://www.cnblogs.com/cntian/p/13438893.html