vue3 自定义组件中使用 v-model

1、直接绑定 v-model，但是 Props 要固定为 modelValue

组件D：

注意这里的 Props 和 Emits，必须使用 Vue 提供的 defineProps() 和 defineEmits()。

如果父组件想要使用 v-model 直接绑定，则需要使用与 modelValue 相同的 prop 名称和与 update:modelValue 相同的事件名称。

 

 

 

2、如果想为 prop 和 event 使用不同的名称，也是可行的：

组件C（2个组件一样，主要是 Props 区别）：

 

 这里的界面绑定要注意一下，需要 v-model:value 形式绑定 ：

 其他代码项皆类似，这里就不记录了。

 

3、也可以同时绑定多个 v-model：

 

总结：

无论直接使用 v-model ，还是 v-model:value 形式的绑定，底层都对应着需要定义 Props 为 modelValue 或 其他自定义名称，Emits 则对应着 Props 的名称并添加前缀 update:。

 

 

参考：

https://cn.vuejs.org/guide/components/v-model.html

https://devpress.csdn.net/vue/632fc951357a883f870c8be2.html