在VUE中，无法更新子组件，使用provide/inject传递数据

Question

在下面的代码中，在 ChildComponent 的输入 fiend 中输入数据时， myName 应更新 ParentComponent ，并且这也应该反映在 ChildComponent 中。但这里并没有发生这种情况。谁能帮我解决这个问题。

##ParentComponent.vue##

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

<script>

export default {
  name: 'App',
  data(){
    return {
      myName: 'Parent Component'
    }
  },
  provide() {
    return {
      myName: this.myName,
      setName: this.setMyName
    }
  },
  methods: {
    setMyName(name){
      this.myName = name;
    }
  }
}
</script>

##ChildComponent.vue##

<template>
    <ul>
        <li><b>I am {{myName}}</b></li>
        <li>
            <input type="text" v-model="name" @input="setName(name)">
        </li>
    </ul>
</template>

<script>
export default {
    inject: ['myName', 'setName'],
    emits: ['set-name'],
    data(){
        return {
            name: null
        }
    }
}
</script>

Answer 1

您没有提到您可以使用哪个版本。我冒昧地使用 Vue 3.4 和组合 API 创建了一个工作版本。这使您可以显着简化代码，同时提高清晰度。

ParentComponent.vue

<script setup>
import {ref} from "vue"
import ChildComponent from "./ChildComponent.vue"

const name = ref("Parent Component")
</script>

<template>
  {{name}} (parent)
  <child-component v-model="name" />
</template>

ChildComponent.vue

<script setup>
const name = defineModel()

function update(event) {
  name.value = event.target.value
}
</script>

<template>
  <ul>
    <li><b>I am {{name}} (child)</b></li>
    <li>
      <input type="text" :value="name" @input="update">
    </li>
  </ul>
</template>