Vue组件通过事件总线接收消息后如何渲染显示？

首先，咱们先把你给出的接收组件代码补全并修正，核心思路是把事件总线收到的消息赋值给组件的data属性，然后在模板中根据这个属性的值进行渲染。

第一步：补全事件监听的回调逻辑 #

你在mounted钩子中已经监听了CARS_LOADED事件，但代码没写完，需要把收到的cars数据赋值给组件的data属性，这样模板才能访问到它：

<script>
// 假设你已经正确导入了事件总线bus，比如从bus.js文件导入
import bus from './bus.js'

export default {
  data() {
    return {
      cars: null // 初始化接收数据的变量
    }
  },
  mounted() {
    // 监听事件总线的消息，收到后赋值给this.cars
    bus.$on('CARS_LOADED', (cars) => {
      this.cars = cars; // 这一步是关键，把消息存到组件的响应式数据里
    })
  },
  // 重要：组件销毁时解绑事件，避免内存泄漏
  beforeDestroy() {
    bus.$off('CARS_LOADED')
  },
  methods: {
    display() {
      // 这里可以添加你需要的点击逻辑，比如打印当前的cars数据
      console.log(this.cars)
    }
  }
}
</script>

第二步：修改模板渲染数据 #

你原来的模板里用了v-model="cars"，这是错误的——v-model只适用于表单输入元素（比如input、select），div不需要这个指令。接下来根据cars的数据类型来调整模板：

情况1：如果cars是一个数组（比如多个汽车对象）

用v-for循环渲染每一项，同时加上空状态提示：

<template>
  <div>
    <!-- 当有数据时渲染列表 -->
    <div v-if="cars && cars.length > 0">
      <h3>已加载的汽车</h3>
      <div v-for="(car, index) in cars" :key="index">
        Car model: {{ car.model }}
        <!-- 如果有其他属性，比如品牌、年份，也可以直接渲染 -->
        <span> - Brand: {{ car.brand }}</span>
      </div>
    </div>
    <!-- 没有数据时显示提示 -->
    <div v-else>
      暂无汽车数据，请等待加载...
    </div>
    <input type="button" @click="display" value="查看当前数据" />
  </div>
</template>

情况2：如果cars是单个对象（比如一辆车的详情）

直接访问对象的属性即可：

<template>
  <div>
    <div v-if="cars">
      <p>Car model: {{ cars.model }}</p>
      <p>Car brand: {{ cars.brand }}</p>
      <p>Production year: {{ cars.year }}</p>
    </div>
    <div v-else>
      暂无汽车数据
    </div>
    <input type="button" @click="display" value="查看当前数据" />
  </div>
</template>

额外注意事项 #

• 确保事件总线bus是全局可访问的：如果还没定义，可以创建一个单独的bus.js文件，内容如下：

  import Vue from 'vue'
  export default new Vue()
  

  然后在需要使用的组件中导入它即可。
• 一定要在组件销毁时解绑事件监听（beforeDestroy钩子中的bus.$off），否则组件多次创建后会重复监听事件，导致不必要的重复渲染或逻辑错误。

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