Vue中API调用完成后，如何向父组件emit数据以展示标题？

1. 子组件中触发自定义事件传递数据 #

在子组件的apiData方法中，获取到目标name值后，使用this.$emit()触发一个自定义事件，将数据传递给父组件。修改后的子组件代码如下：

<template>
  <sankey-input-details v-if="!tableLoading" :cardListData="dataFromApi"/>
</template>

<script>
export default {
  // ...其他组件选项
  methods: {
    async apiData() {
      const nodeData = this.dateRange
        ? await get('nodeData', {
            dateStart: this.dateRange[0],
            dateEnd: this.dateRange[1],
            nodeName: this.nodeName
          }) 
        : await get('nodeData', {
            nodeName: this.nodeName
          });
      
      // 触发自定义事件，传递API返回的name值
      this.$emit('update-dashboard-title', nodeData[0].name);
      
      this.tableLoading = false;
    }
  },
  mounted() {
    // 绑定window监听事件，触发API调用
    window.addEventListener('your-trigger-event', () => {
      this.apiData();
    });
  },
  beforeUnmount() {
    // 组件销毁前移除监听，避免内存泄漏
    window.removeEventListener('your-trigger-event', () => {
      this.apiData();
    });
  }
}
</script>

2. 父组件中监听事件并更新标题 #

父组件需要监听子组件触发的自定义事件，将收到的name值赋值给仪表盘的标题变量。注意：若父组件的title是props，不能直接修改，需维护本地变量存储标题值。修改后的父组件代码示例：

<template>
  <div>
    <!-- 仪表盘组件，使用本地变量作为标题 -->
    <dashboard-component :title="currentDashboardTitle"/>
    <!-- 引入子组件并监听自定义事件 -->
    <your-child-component 
      :cardListData="cardListData"
      @update-dashboard-title="updateDashboardTitle"
    />
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    cardListData: Array
  },
  data() {
    return {
      // 本地变量存储仪表盘标题，初始值可复用props的title
      currentDashboardTitle: this.title
    };
  },
  methods: {
    updateDashboardTitle(newTitle) {
      // 更新仪表盘标题
      this.currentDashboardTitle = newTitle;
    }
  }
}
</script>

补充提示 #

• 自定义事件名建议用短横线分隔的命名风格，符合Vue规范；
• 务必在子组件销毁前移除window监听事件，防止内存泄漏；
• 如果需要双向绑定标题，也可以使用Vue的.sync修饰符或v-model语法糖简化写法，上述基础写法更直观易懂。

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