非父子组件之间的通信,可以通过一个空的 Vue 实例作为中央事件总线(事件中心),用他来触发事件和监听事件。
在这里,如果是工作中的新手看了官网的例子直接上手写,会有些发懵。这个作为事件总线空的 Vue 实例我该写哪里去?因为工作中我们的组件都是互相独立的,不可能写一起的,作用域是不同的,所以需要稍作调整
一、在 main.js 中初始化根 Vue 之前,添加一个 data 对象,内写入一个名为 Event 的空 Vue 对象,也就是中央事件总线
new Vue({
el: ‘#app‘,
data:{
Event: new Vue()
},
render: h => h(App)
})
二、在各组件中使用 Vue 的实例属性 $root 来访问我们当前组件树的根 Vue 实例,这样就可以使用
vm.$root.Event 来访问我们定义的事件发射器 Event
比如我在 Hello.vue 组件中想发送数据到 Vue.vue 组件中
<template>
<div class="hello">
<h3>我是 {{name}} 组件</h3>
<button @click="send">发送数据到Vue组件中</button>
</div>
</template>
<script>
export default {
data(){
return {
name: ‘Hello‘
}
},
methods:{
send(){
// 触发组件 Hello 中的事件
// $emit(事件名,数据)
this.$root.Event.$emit(‘hello‘,this.name)
}
}
}
</script>
在 Vue.vue 组件中进行接收
<template>
<div class="Vue">
<h3>我是 {{name}} 组件</h3>
</div>
</template>
<script>
export default {
data(){
return {
name: ‘‘
}
},
mounted(){
// 在组件 Vue 创建的钩子中监听事件
// $on(事件名,数据)
this.$root.Event.$on(‘hello‘,name => {
this.name = name
})
}
}
</script>
这样就可以实现数据的通信了
非父子组件通信
原文地址:https://www.cnblogs.com/wu971023-/p/8985166.html
时间: 2024-10-14 00:58:14