Vue中非父子组件通过事件总线改变数据但data中数据不变的问题

最新推荐文章于 2024-03-24 22:16:06 发布

iloveCodingC

最新推荐文章于 2024-03-24 22:16:06 发布

阅读量753

点赞数 3

文章标签： vue js

本文链接：https://blog.csdn.net/CZL_NB/article/details/105708859

版权

在Vue中，通过事件总线实现非父子组件间通信时遇到数据不更新的问题。尽管事件成功接收并打印，但组件的data并未改变。原因在于缺少上下文绑定。解决方案是在调用函数时使用.bind(this)，确保函数内部能正确引用组件的data，从而实现数据的正确修改和渲染。

摘要由CSDN通过智能技术生成

Vue中创建事件总线之后，非父子组件1向非父子组件2发送事件之后，非父子组件2成功接收到事件，并对组件2中的参数进行修改

先在main.js中创建Vue对象并赋给$EventBus实例，代码如下

Vue.prototype.$EventBus=new Vue()

父子组件1（事件发出端）–使用$emit发出事件

<template>
<div  @click="setprclick()">设置</div>
</template>
<script>
export default {
    name:"Profile",
    methods:{
        setprclick(){
        this.$EventBus.$emit('setprclick')       
        }
    }
}
</script>

非父子组件2（事件接受端）----使用$on接收事件

<template>
  <div id="app" class="wrapper">
    <main-tab-bar v-show="set" />
  </div>
</template>

<script>
import MainTabBar from "components/content/mainTabbar/MainTabBar";
export defaul