Vue中使用Provide/Inject传递数据，子组件输入框无初始值问题

问题描述 #

在Vue中使用Provide/Inject传递数据，App.vue中已通过Provide提供firstName: "John"，但子组件Step1的输入框绑定该值后显示为空，如何让输入框正确填充初始值？

原代码示例 #

<template >
  <div class="container">
    <div class="content-wrapper">
      <h1>Step 1</h1>
      <div class="form-group">
        <label>First Name</label
        ><input
          name="name"
          v-model="firstName"
          placeholder="Your first name"
          class="form-control"
          required
        />
      </div>
      <div class="form-group">
        <label>Last Name</label
        ><input
          name="lastname"
          v-model="lastName"
          placeholder="Your last name"
          class="form-control"
          required
        />
      </div>
      <button type="button" @click.prevent="nextStep" class="btn">
        Next step
      </button>
    </div>
    <Button firstName="firstName" lastName="lastName" />
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  inject: ["firstName", "lastName"],
  data() {
    return {
      firstName: this.firstName,
      lastName: this.lastName,
    };
  },
  components: {
    Button,
  },
  methods: {
    nextStep() {
      this.$emit("next");
    },
  },
};
</script>

<style scoped>
.form-group {
  display: block;
}
</style>

问题原因 #

当前代码的核心问题是inject注入的属性与data中的属性重名：Vue实例初始化时，data属性会覆盖inject注入的同名属性，且在data函数执行阶段，this.firstName无法正确指向注入的父组件值，最终导致本地数据初始化失败，输入框显示为空。

解决方案：为Inject属性设置别名，避免命名冲突 #

修改Step1组件的inject选项，为父组件提供的属性设置别名，再用别名初始化本地data属性，确保能正确获取到父组件传递的初始值：

<template >
  <div class="container">
    <div class="content-wrapper">
      <h1>Step 1</h1>
      <div class="form-group">
        <label>First Name</label
        ><input
          name="name"
          v-model="firstName"
          placeholder="Your first name"
          class="form-control"
          required
        />
      </div>
      <div class="form-group">
        <label>Last Name</label
        ><input
          name="lastname"
          v-model="lastName"
          placeholder="Your last name"
          class="form-control"
          required
        />
      </div>
      <button type="button" @click.prevent="nextStep" class="btn">
        Next step
      </button>
    </div>
    <!-- 修正：添加冒号绑定组件本地变量，而非传递字符串 -->
    <Button :firstName="firstName" :lastName="lastName" />
  </div>
</template>

<script>
import Button from "./Button.vue";
export default {
  inject: {
    // 为注入的属性设置别名，避免与本地data属性重名
    injectedFirstName: {
      from: "firstName"
    },
    injectedLastName: {
      from: "lastName"
    }
  },
  data() {
    return {
      // 使用别名初始化本地属性
      firstName: this.injectedFirstName,
      lastName: this.injectedLastName,
    };
  },
  components: {
    Button,
  },
  methods: {
    nextStep() {
      this.$emit("next");
    },
  },
};
</script>

<style scoped>
.form-group {
  display: block;
}
</style>

补充说明 #

1. 命名冲突规避：始终确保inject注入的属性与组件本地data、props等属性名称不重复，避免Vue实例属性覆盖导致的取值错误。
2. 双向绑定的必要性：inject注入的属性默认是只读状态（若父组件提供的是静态值），因此必须在data中创建本地副本，用于v-model的双向绑定，避免直接修改注入属性引发的异常。
3. 组件传参修正：原代码中<Button firstName="firstName" />传递的是字符串"firstName"，需改为:firstName="firstName"才能正确绑定组件的本地变量。

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