vue组件通讯之互不关联组件之间的通讯

1.使用事件总线机制

• 1.创建实例,导出实例,新建bus.js文件

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)  // ==> '我是传递的值'
})

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,就不多介绍了