Vue中使用provide/inject无法更新子组件数据的问题求助

• 非响应式的provide传递：父组件直接传递基本类型this.myName，这是值拷贝，父组件更新myName时，子组件注入的myName不会同步。
• 子组件初始值未同步：子组件的name初始为null，未和父组件的myName对齐，导致输入框初始为空。
• 冗余事件绑定：v-model本身已包含输入事件逻辑，额外绑定@input属于重复操作。

方案一：用响应式对象包裹传递（推荐） #

修改ParentComponent.vue #

将myName和修改方法包装在响应式对象中，确保子组件能感知到父组件的更新：

##ParentComponent.vue##

<template>
  <child-component />
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      myName: 'Parent Component'
    }
  },
  provide() {
    return {
      // 用响应式对象包裹，属性更新会自动同步到子组件
      nameContext: {
        get myName() {
          return this.myName;
        },
        setName: this.setMyName
      }
    }
  },
  methods: {
    setMyName(name){
      this.myName = name;
    }
  }
}
</script>

修改ChildComponent.vue #

注入响应式对象，通过计算属性绑定输入框，同步初始值与更新逻辑：

##ChildComponent.vue##

<template>
    <ul>
        <li><b>I am {{ nameContext.myName }}</b></li>
        <li>
            <input type="text" v-model="currentName">
        </li>
    </ul>
</template>

<script>
export default {
    inject: ['nameContext'],
    computed: {
      currentName: {
        get() {
          return this.nameContext.myName;
        },
        set(newVal) {
          this.nameContext.setName(newVal);
        }
      }
    }
}
</script>

方案二：通过方法获取最新值（简化版） #

如果不想用对象包裹，可在父组件提供获取myName的方法，子组件实时调用获取最新值：

ParentComponent.vue 修改部分 #

provide() {
  return {
    getMyName: () => this.myName,
    setName: this.setMyName
  }
}

ChildComponent.vue 修改部分 #

<template>
    <ul>
        <li><b>I am {{ getMyName() }}</b></li>
        <li>
            <input type="text" v-model="currentName">
        </li>
    </ul>
</template>

<script>
export default {
    inject: ['getMyName', 'setName'],
    computed: {
      currentName: {
        get() {
          return this.getMyName();
        },
        set(newVal) {
          this.setName(newVal);
        }
      }
    }
}
</script>

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