Vue中通信方式

Vue中常见的组件通信方式氛围三类

一、父子通信

父向子传递数据是通过 props，子向父是通过 events（$emit）；

通过父链 / 子链也可以通信（$parent / $children）；

ref 也可以访问组件实例；

 <div class="map-wrap">
     <MapIndex ref="cityWaterMap" v-on="$listeners" />
  </div>
this.$refs.cityWaterMap.localZoneCommon({ areaName: value })

provide / inject；

$attrs/$listeners；

二、兄弟通信

Bus；

Vuex；

三、跨级通信

Bus；

Vuex；

provide / inject、

$attrs / $listeners、

$attrs:除了组件内props声名了的所有给组件传的值;当又给grandron组件传了和$attrs内属性同名的值时，值会被覆盖(使用传入的值)

当我们需要给多层嵌套父子组件传值，而且杂的时候，可以直接使用它，可以使代码看起来更加简洁

// parent.vue
<child1 :data-status="dataStatus" :data-message="dataMessage"></child1>

export default {
	data(){
		return {
			name: '123',
			age: 23
		}
	}
}
// child1.vue
<grandron v-bind="$attrs"></grandron>
export default {
	props:{
		name: String,
	},
	data(){
		return {}
	},
	created(){
		console.log('name',this.name)  //  123
		console.log('age',this.age)  //  23
	}
}
// grandron.vue
export default {
	data(){
		return {}
	},
	created(){
		console.log('dataStatus',this.$attrs)  //  {age: 23} 因为child组件中props声名了name所以这里$attrs就不含有name
	}
}

$listeners: 接收除了带有.native事件修饰符的所有事件监听器

当出现同名的事件时，不会被覆盖，而是都会执行，执行顺序就是事件冒泡的执行顺序，先触发child 再触发parent

// parent.vue
<child1 @handleEvent="dealData"></child1>

export default {
	data(){
		return {
			name: '123',
			age: 23
		}
	},
	methods:{
		dealData(){
			console.log('===parent===')
		}
	}
}
// child1.vue
<grandron v-on="$listeners" @handleEvent="dealData"></grandron>
export default {
	props:{
		name: String,
	},
	data(){
		return {}
	},
	methods:{
		dealData(){
			console.log('===child===')
		}
	}
}
// grandron.vue
<button @click="$emit('handleEvent')">click me!</button>
export default {
	data(){
		return {}
	},
}


// 控制台
// ===child===
// ===parent===

eventBus 又称为事件总线。在 Vue 中可使用 eventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。eventBus 其实就是一个发布订阅模式，利用 Vue 的自定义事件机制，在触发的地方通过 $emit 向外发布一个事件，在需要监听的页面，通过 $on 监听事件。

1.创建

// 创建一个eventBus.js文件
import Vue from 'vue'

const eventBus = new Vue()

export default eventBus

2.引入

// import方式引用

import eventBus from './utils/eventBus.js'

// 使用Vue原型链方式引用

// 在 src 的 main.js 中，加上以下代码 

// 引入第一步创建好的 EventBus
import eventBus from './utils/eventBus.js'

// 这个方式可以在任何组件里直接用 this.$EventBus 调用
Vue.prototype.$eventBus = eventBus

// 也可以直接这样使用，不需要第一步的创建
// import Vue from 'vue'
// Vue.prototype.$eventBus = new Vue()

3. 递交

this.$eventBus.$emit('getList',props)

4.监听

this.$eventBus.$on('getList', (props)=>{

})

5.移除

 beforeDestroy () {     

    this.$eventBus.$off('getList')  

}