Vue中provide/inject逻辑下v-if指令失效问题排查

核心问题 #

你当前的代码存在两个关键错误：

1. 组件内data重复定义导致响应式失效：你在组件的data里重新定义了activePhase，并把inject获取的初始值赋值给它。但Vue的data属性仅在组件初始化时赋值一次，后续父组件中activePhase更新时，组件内data里的这个值不会同步变化，导致v-if="activePhase == 1"的判断条件一直停留在初始值，所以两个组件始终显示。
2. 基本类型值的provide/inject无响应式：如果firstName、lastName是单独provide的基本类型值，它们本身不具备响应式特性，v-model绑定后无法同步到父组件，也无法随父组件数据更新。

修复步骤 #

1. 移除组件内data中重复定义的属性 #

直接使用inject进来的属性，不要在data里复制一份。修改Step1.vue的script部分：

<script>
import Button from "./Button.vue";
export default {
  components: {
    Button,
  },
  inject: ["activePhase", "formData"], // 后续会在App.vue中提供formData对象
  methods: {
    nextStep() {
      this.$emit("next");
      console.log(this.activePhase);
    },
  },
};
</script>

2. 修改App.vue，提供响应式对象 #

在App.vue中，不要单独提供基本类型值，而是把需要共享的属性包装到一个响应式对象里，确保inject后能同步更新：

// App.vue 示例代码
export default {
  data() {
    return {
      activePhase: 1,
      formData: {
        firstName: "",
        lastName: ""
      }
    };
  },
  provide() {
    // 提供包含响应式属性的对象
    return {
      activePhase: this.activePhase,
      formData: this.formData
    };
  },
  methods: {
    handleNext() {
      this.activePhase++;
    },
    handlePrev() {
      this.activePhase--;
    }
  }
};

3. 调整组件模板的绑定逻辑 #

把v-model绑定到formData的属性上，确保数据双向同步：

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

补充说明 #

Vue2中，provide/inject默认对基本类型值不提供响应式支持，所以必须通过传递响应式对象（比如data里定义的对象）来实现数据同步。如果你不想传递整个对象，也可以用函数包装基本类型值，但模板中需要调用函数获取值（比如v-if="activePhase() == 1"），但这种方式不如传递响应式对象直观。

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