Vue3父组件axios异步数据传子组件，initialSlug初始为空求助

问题分析 #

核心问题在于：父组件通过axios异步获取数据时，子组件已完成初始化（created/mounted钩子执行），此时initialSlug还是父组件data中初始的空字符串。当父组件拿到接口数据更新slug后，子组件的slug变量不会随之更新——因为子组件的slug仅在初始化时从initialSlug赋值一次，之后不会自动响应prop的变化。

解决方案：监听initialSlug的变化 #

在子组件中添加watch监听initialSlug属性，当它发生变化时更新slug变量，同时通过wasEdited标记避免覆盖用户已编辑的内容。

修改后的ChildComponent.vue代码：

<template>
  <input type="text" v-model="slug" @input="wasEdited=true">
</template>

<script>
import Slug from "slug";

Slug.defaults.modes['pretty'] = {};
export default {
  name: "Child",
  props: {
    title: {
      type: String,
      required: true
    },
    initialSlug: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      slug: this.initialSlug,
      wasEdited: false,
    }
  },
  watch: {
    initialSlug(newVal) {
      // 仅在用户未编辑时更新slug
      if (!this.wasEdited) {
        this.slug = newVal;
      }
    }
  }
}
</script>

额外优化建议 #

1. 父组件中async/await和.then()混用可简化，让代码逻辑更清晰：

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  name: "Parent",
  data() {
    return {
      title: '',
      slug: ''
    }
  },
  components: {ChildComponent},
  async created() {
    try {
      const response = await axios.get(`/categories/4/detail`);
      this.title = response.data.title;
      this.slug = response.data.slug;
    } catch (error) {
      // 可添加错误处理逻辑，比如提示用户请求失败
      console.error('获取数据失败:', error);
    }
  }
}
</script>

2. 若需根据title自动生成未编辑状态下的slug，可添加对title的监听：

watch: {
  initialSlug(newVal) {
    if (!this.wasEdited) {
      this.slug = newVal;
    }
  },
  title(newVal) {
    if (!this.wasEdited) {
      this.slug = Slug(newVal, {mode: 'pretty'});
    }
  }
}

内容的提问来源于stack exchange，提问作者Henna Yöresel