【Vue】父子、兄弟及不相干组件通信

父子组件通信

父=>子

父（v-on即:绑定事件）：

子（props接收）：

子=>父

子（this.$emit('fn',data)）：

父（@接收）

兄弟组件通信

使用eventBus，事件总线机制。（此方式也可以用在两个不相干组件上）

• $on 接收数据的那个组件
• $emit 发送数据的那个组件

因为Vue实例的原型都在Vue.prototype上，因此我们可以将事件的中心绑定到Vue.prototype的某个属性上，称为bus。

1. 创建实例，导出实例

import Vue from "vue"
const Bus = new Vue()
export default Bus

2. 传值的组件引入事件总线实例,发射事件

import Bus from 'bus.js'
Bus.$emit('something','我是传递的值')

3. 接收的组件引入事件总线实例,接收事件

import Bus from 'bus.js'
Bus.$on('something',(res) => {
  console.log(res)  // ==> '我是传递的值'
})

不相干组件通信

1. 事件总线机制

具体操作请看兄弟组件通信部分

2. 使用provide/inject

1. 要传值的组件provide

provide:{
  something:'我是传递的值'
}

如果要传递的时data里的值,要使用函数的形式return(同data)

data(){
  return{
    msg:'我是传递的值'
  }
},
provide(){
  return{
    something: this.msg
  }
}

2. 接收值的组件通过inject接收

inject:{
  message:{
    from: 'something'
  }
},

mounted(){
  console.log(this.message) // ==> '我是传递的值'
}

3. 使用Vuex

其实vuex很简单，简单的理解来说就是一个数据管理框架，大家将数据都放到一个地方，由这个地方指定的命令来存储和读取数据。
具体使用可以看这篇博客 vuex基础。