目录
通过事件总线eventBus实现兄弟组件通信
在src下新建一个文件utils
1.创建一个谁都能访问的事件总线(空vue实例)
utils新建一个index.js
//创建eventbus事件总线-一个vue实例对象
import Vue from 'vue'
const vm = new Vue( )
//导出vm
export default vm
在子组件内
HeaderComp组件
2.A组件(接受方),监听Bus的$on事件
使用数据方通过$on订阅
//导入事件总线
import vm from '../utils'
//使用数据方通过$on订阅
//vm.$on( 'useMsg' , (data) => {
//console.log(data)
//})
export default {
data ( ) {
return {
son_money: 8000}
},
methods: {
handleclick ( ) {
//使用数据方通过$on订阅
vm. $on( 'useMsg', (data) => {
console.log(data)
})
}
子组件兄弟
MainComp组件
3.B组件(发送方),触发Bus的$emit事件
使用vm.$emit
//导入事件总线
import vm from '../utils'
export default{
//组件名称方便调试
name: 'HeaderComp' ,
data () {
return {
msg: 'HeaderComp组件的数据'}
},
methods: {
handleclick ( ) {
vm.$emit ( 'useMsg ' , this.msg)}
}
}
依赖注入
孙子组件
孙子组件inject接收数据
export default{
inject:['money']
}
父亲组件
导入 注册 孙子组件
祖先
祖先通过provide提供数据
import HeaderComp from './components/HeaderComp'
// import MainComp from './components/MainComp'
// 必须默认导出一个对象->组件实例(vue实例)
// 组件使用三部曲 1 创建 2 导入 3 注册
export default {
// 提供给后代组件的数据
provide () {
return {
money: this.money
}
},
// 父组件的数据
data () {
return {
money: 1000
}
},
components: {
HeaderComp
// MainComp
},
methods: {
fn (money) {
this.money = money
}
}
}
</script>