Vue组件间无法向数组推送数据，问题出在哪里？

看起来你遇到的核心问题是数据结构不匹配，导致虽然组件已经接收到数据，但页面无法正确渲染，看起来像是数组没变化。我来帮你拆解问题并给出修复方案：

问题拆解 #

1. 发送组件只传递了标题，未传递正文：你的postBlog方法仅发射了blogTitle，但接收组件的模板期望每个blog对象同时拥有blogTitle和blogBody属性。
2. 接收组件push的是单个字符串，而非对象：你把接收到的标题字符串直接push到blogs数组里，而模板里用blog.blogTitle读取属性——字符串自然没有这个属性，所以页面上看不到内容，看起来像是数组没更新。
3. 日期计算的逻辑问题：你的getDate()方法在组件每次渲染时都会执行，导致所有博客显示的都是当前日期，而不是发布时的日期。

修复步骤 #

1. 修改发送组件的事件发射逻辑

把标题、正文打包成完整对象发送，同时加上唯一ID和发布日期：

<!-- 发送数据组件的script部分 -->
<script>
import {eventBus} from '../main'
export default {
  data() {
    return {
      blogTitle: '',
      blogBody: ''
    }
  },
  methods: {
    postBlog() {
      // 构建包含所有必要信息的博客对象
      const newBlog = {
        id: Date.now(), // 用时间戳作为唯一ID，满足v-for的key需求
        blogTitle: this.blogTitle,
        blogBody: this.blogBody,
        date: new Date().toLocaleDateString() // 存储发布时的日期
      }
      eventBus.$emit('newBlog', newBlog);
      // 清空输入框，提升用户体验
      this.blogTitle = '';
      this.blogBody = '';
    }
  }
}
</script>

2. 修改接收组件的事件监听与模板

接收完整的博客对象并push到数组，同时调整日期显示方式：

<!-- 接收数据组件的template部分 -->
<div class="card ml-5 mr-5 mt-5" v-for="blog in blogs" :key="blog.id" >
  <div class="card-header alert-light text-info">
    <h3>{{ blog.blogTitle }}</h3>
    <small>
      <em>{{ blog.date }}</em>
    </small>
  </div>
  <div class="card-body">
    <p>{{ blog.blogBody }}</p>
  </div>
</div>

<!-- 接收数据组件的script部分 -->
<script>
import { eventBus } from "./main";
export default {
  data() {
    return {
      blogs: []
    };
  },
  created() {
    // 监听正确的事件名，接收完整博客对象
    eventBus.$on("newBlog", newBlog => {
      console.log(newBlog);
      this.blogs.push(newBlog);
    });
  }
};
</script>

3. 确认EventBus实例正确性

确保你的main.js里正确创建了EventBus实例：

// main.js
import Vue from 'vue'
import App from './App.vue'

export const eventBus = new Vue(); // 这行必须存在，确保组件能引入同一个实例

new Vue({
  render: h => h(App),
}).$mount('#app')

为什么之前的代码看起来没效果？ #

你之前push的是字符串（比如"My First Blog"）到blogs数组里，数组确实新增了元素，但模板尝试读取blog.blogTitle时，字符串没有这个属性，所以渲染出来的内容是空的，看起来就像数组没变化。而控制台打印的data是字符串，你可能没注意到这一点。

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