Vue2非单文件组件场景下，如何通过事件总线传递引用并设为null？

嘿，我来帮你梳理下问题所在，还有更贴合Vue设计理念的解决方式～

为啥item = null不生效？ #

你在事件总线回调里写的item = null之所以没效果，核心原因是：这里的item只是父组件selectedApp的一个局部引用副本。在JavaScript里，对象是按引用传递，但你给这个局部变量赋值null，只是切断了这个局部变量和原对象的关联，完全不会影响父组件里selectedApp的实际引用。Vue的响应式更新依赖的是对组件数据本身的修改，所以这种操作自然不会触发视图变化。

你后来的自定义事件方案才是最优解 #

你发现的<selected-item @remove="selectedApp = null" :item="selectedApp"></selected-item>这种写法，其实是Vue父子组件通信的标准推荐方式！比起事件总线，它更清晰、更符合Vue的设计逻辑——因为这里是明确的父子组件关系，子组件只需要负责触发“要删除”的事件，父组件自己管理数据的修改，职责划分非常清楚，后续维护也更容易。

优化你的selected-item组件 #

我们可以把组件改得更通用，让它不需要关心父组件具体要做什么操作，只负责对外触发事件：

Vue.component('selected-item', {
  props: ['item'],
  methods: {
    handleRemove() {
      // 触发自定义remove事件，不需要传递item，父组件自己掌控数据
      this.$emit('remove');
    }
  },
  template: `
    <span>
      <div class="button round btn-app-class selected-btn">
        {{item.name}}
        <sup>
          <span class='btn-delete link' @click="handleRemove">x</span>
        </sup>
      </div>
    </span>
  `
})

父组件的使用方式就和你发现的一样简单：

<selected-item @remove="selectedApp = null" :item="selectedApp"></selected-item>

如果非要用事件总线怎么改？ #

当然，如果出于某些特殊场景一定要用事件总线，你不能试图修改传入的item，而是要通知父组件去修改它自己的selectedApp：

// 子组件的方法里
setToNull() {
  bus.$emit('clearSelected');
}

// 父组件的mounted钩子
mounted() {
  bus.$on('clearSelected', () => {
    this.selectedApp = null; // 直接修改父组件的响应式数据，才能触发视图更新
  })
}

但说实话，这种方式在这里完全是过度设计，父子组件直接用自定义事件就足够清晰了，事件总线更适合跨层级或者无关联组件之间的通信。

最后总结一下 #

• 父子组件通信优先用子组件$emit自定义事件，父组件@事件名监听的模式，这是Vue官方最推荐的方案，代码可读性和维护性都更高。
• 你之前的错误本质是对JavaScript的引用传递机制理解不到位，局部变量的赋值不会影响原对象的引用，自然无法触发Vue的响应式更新。

内容的提问来源于stack exchange，提问作者timpone