Vue中如何接收子组件$emit的数据并赋值给父组件属性？

别担心，这其实是Vue组件通信里很基础的场景，我来一步步帮你搞定：

第一步：在父组件中监听子组件的fetchtab事件 #

你需要在父组件引用子组件的位置，通过@（v-on:的简写）监听子组件触发的fetchtab事件，同时绑定一个处理方法，比如命名为handleFetchTab：

<!-- 父组件模板中引用子组件的代码 -->
<your-child-component @fetchtab="handleFetchTab"></your-child-component>

第二步：在父组件中定义事件处理方法 #

接下来在父组件的methods选项里实现handleFetchTab方法，把从子组件接收的数据直接赋值给currentData：

// 父组件的script部分
export default {
  data() {
    return {
      currentData: [] // 这里建议初始化为空数组，因为你说数据是对象数组，空对象会导致v-for报错
    }
  },
  methods: {
    handleFetchTab(data) {
      // 直接将子组件传递的数据赋值给currentData
      this.currentData = data;
      // 如果需要对数据做额外处理（比如过滤、格式化），也可以在这里操作
      // 示例：this.currentData = data.filter(item => item.name);
    }
  }
}

小提醒：你原本把currentData初始化为{}（空对象），但因为数据是对象数组，改成空数组[]更合理，这样即使还没拿到数据，v-for遍历空数组也不会抛出错误。

第三步：修正模板中的v-for写法 #

你的模板里用了@{{ item.name }}，在Vue模板中直接写{{ item.name }}即可；另外v-for必须加上:key属性，这是Vue的最佳实践，能避免不必要的渲染问题：

<!-- 父组件模板中的列表遍历代码 -->
<ul>
  <li v-for="item in currentData" :key="item.id">{{ item.name }}</li>
</ul>

如果你的数组里没有id这类唯一标识，也可以用循环索引当key（尽量优先用唯一值）：

<li v-for="(item, index) in currentData" :key="index">{{ item.name }}</li>

这样整个流程就通顺了：子组件触发fetchtab事件并传递数据 → 父组件监听到事件后调用处理方法，把数据赋值给currentData → 模板中的v-for会自动响应数据变化，渲染出对应的列表项。

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