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

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>

另一个子组件

<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 的道具，默认值为空字符串。

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

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

的值

<AnotherChildComponent :value="value"/>

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

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

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

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

How to pass v-model value to child's child component in Vue 3

vuejs3

v-model