vue2组件通信之兄弟通信、祖先后代通信

目录

兄弟组件通信

祖先后代通信

---

兄弟组件通信

通过事件总线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>