Vue3异步请求完成后如何向子组件传递Props并刷新组件

你的核心问题是props类型不匹配，导致父组件数据更新后子组件未正确响应。Vue的props本身是响应式的，父组件数据更新时子组件会自动刷新，不需要额外刷新操作，只需修正以下两点：

1. 统一数据类型 #

父组件中myText初始值是数组[]，但子组件props定义为String类型，类型不匹配会导致渲染异常。根据接口返回数据的实际类型调整：

• 若接口返回字符串：父组件初始值改为空字符串''
• 若接口返回数组：子组件props类型改为Array

2. 修正后的代码示例 #

父组件 #

<template>
  <div>
    <TextBlock :myText="myText" />
  </div>
</template>

<script>
import TextBlock from './TextBlock.vue'
import { GetContent } from './your-api-path'

export default {
  components: {
    TextBlock
  },
  data: () => ({
    myText: '' // 初始值改为空字符串，匹配子组件String类型
  }),
  async created() {
    const textId = this.$route.params.text_id
    if (textId) {
      this.myText = await GetContent(textId)
    }
  }
};
</script>

子组件 #

<template>
  <code>
    {{ myText }}
  </code>
</template>

<script>
export default {
  props: {
    myText: {
      type: String,
      default: '' // 增加默认值，避免未加载时的空值显示问题
    }
  },
};
</script>

额外说明 #

• Vue的响应式系统会自动监听父组件myText的变化，只要直接赋值（如this.myText = 新数据），子组件就会自动更新，无需手动刷新。
• $emit确实仅用于子组件向父组件传递事件，反向传递数据不需要它。
• 如果接口返回的是数组或对象，只需对应修改子组件props的type，父组件直接赋值即可触发响应式更新。

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