如何在 Vue 3 中将 v-model 值传递给子组件的子组件

Question

如何将 v-model 值从父组件传递到子组件的子组件？

父组件

<ChildElement v-model="name" />

<script>
import { ref } from "vue";
export default {
  setup() {
    const name = ref('Nagisa')
  }
};
</script>

子组件

<AnotherChildComponent :value="value"/>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ""
    }
  },
  emits: ['update:modelValue']
};
</script>

AnotherChild 组件

<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />

<script>
export default {
  props: {
    modelValue: {
      type: String,
      default: ""
    }
  },
  emits: ['update:modelValue'],
  setup() {
  }
};
</script>

当我想从 AnotherChild 组件更新父组件名称值时，这是有效的，但是默认名称值（“Nagisa”）不会在 AnotherChild 组件中呈现，只是在输入中保留空字符串。

Vuex 不是选项，我想直接从父组件传递。感谢您的帮助。

Answer 1

当您想要传递任何组件属性时，您需要使用您在子组件的 props 对象中输入的确切名称。例如..

在AnotherChild组件的设置中，您有名为modelValue的 prop ，默认值为空字符串。

props: {
    modelValue: {
      type: String,
      default: ""
    }
},

但是，在其父元素 ChildComponent 中，您传递名称为 value 的值，

<AnotherChildComponent :value="value"/>

这是行不通的，因为您在AnotherChild组件中没有任何名为value的 prop ，因此 modelValue 使用其默认值空字符串。您需要将值作为属性与 prop 名称一起传递，如下所示：

<AnotherChildComponent :model-value="value"/>

这也适用于子组件的父组件等等......