vue 一个子组件被两个父组件引用 怎么让$emit识别另外一个父组件

当一个子组件被多个父组件引用时，每个父组件都会创建一个子组件实例，这些实例是独立的，彼此之间没有关联。因此，如果你在一个父组件中触发了子组件的 $emit 事件，在另一个父组件中是无法感知到的。

如果你想让另一个父组件也能感知到子组件的 $emit 事件，可以考虑使用一个事件总线（Event Bus）来实现。事件总线是一个空的 Vue 实例，你可以在它上面定义自定义事件，并在各个组件中使用 $emit 和 $on 方法来触发和监听事件。

具体实现方法如下：

1. 创建一个空的 Vue 实例，作为事件总线：

const EventBus = new Vue();

2. 在子组件中，使用 EventBus.$emit 触发自定义事件：

methods: {
  handleClick() {
    EventBus.$emit('my-event', 'some data');
  }
}

3. 在各个父组件中，使用 EventBus.$on 监听自定义事件：

created() {
  EventBus.$on('my-event', data => {
    console.log(data);
  });
}

这样，当任何一个父组件触发子组件的 $emit 事件时，所有监听了该事件的父组件都能够收到事件并作出响应。

相关问题

Vue.component('model', { props: ['list', 'isactive'], template: `<div class="overlay" v-show="isactive"> <div class="con"> <h4 style="text-align: center">新增 | 修改</h4> <div class="content" > <div style="margin:10px auto;" v-for="(value, key) of modifylist"> <div class="item_name" v-if="key!='uid'&&key!='time'"> <span v-if="key=='id'">编号</span> <span v-else-if="key=='user_name'">用户名</span> <span v-else-if="key=='user_passwd'">密码</span> <span v-else-if="key=='uid'">识别码</span> <span v-else-if="key=='role'">角色</span> <span v-else-if="key=='note'">备注</span> <span v-else-if="key=='time'">时间</span> <span v-else>{{ key }}</span> </div> <input class="item_value" type="text" v-model="modifylist[key]" v-if="key!='uid'&&key!='time'" > <div style="clear: both;"></div> </div> <div style="margin: 20px 30px;"> <input class="item_name" style="font-size: 18px;text-align: center;" type="button" @click="changeActive" value="取消"> <input class="item_value" style="font-size: 18px;text-align: center;" type="button" @click="modify" value="保存"> </div> </div> </div> </div>`, computed: { modifylist() { return JSON.parse(JSON.stringify(this.list)); } }, methods: { changeActive() { this.$emit('change'); }, modify() { this.$emit('modify', this.modifylist); } } });

这是一个 Vue.js 的组件，用于展示一个弹窗，可以用于新增或者修改数据。其中，props 接收两个参数：list 和 isactive，list 是一个对象数组，用于展示数据；isactive 是一个布尔值，用于控制弹窗的显示与隐藏。模板中使用了 v-show 指令控制弹窗的显示与隐藏。computed 属性中定义了一个计算属性 modifylist，用于获取 list 的深拷贝，方便修改数据时不影响原数据。methods 中定义了两个方法：changeActive 和 modify，分别用于关闭弹窗和保存修改后的数据。其中，changeActive 使用了 $emit 方法向父组件传递事件，从而实现关闭弹窗的功能；modify 方法也使用了 $emit 方法向父组件传递修改后的数据。