Vue.js 组件通信

一.、父传子

父组件引入子组件
子组件 在 props 定义需要接收的数据

二、子传父

父组件引入子组件
子组件 this.emit('事件',console.log(传递的数据))

三、非父子组件通信

eventBus

1、 新建 bus.js

import Vue from 'vue';
export default new vue()

要通信的组件引入

import bus from './bus.js'

在组件中传递
bus.$emit('event',value)
在组件中接收
bus.$emit('event',value)

2、使用 provide/inject

tab > tab-head - tabs-item
根组件中

data(){
  return {
     eventBus:new Vue()
  }
},
provide(){
   return {
     eventBus: this.eventBus
   }
}

子孙组件中

inject: ['eventBus']

使用 eventBus

在组件中传递

eventBus.$emit('event',value)

在组件中接收

eventBus.$emit('event',value)