vue3 封装自定义组件v-model的示例

首先要注意 vue3中 v-model 默认绑定的变量名变了，从原理的 value 改成了 modelValue，
如果要改变变量的值，要执行一个事件 this.$emit("update:modelValue", value);

vue3文档地址

补充：下面看下vue3中自定义组件使用v-model

vue2 中的v-model

v-model本质上是一个语法糖,如下代码

因此，对于一个带有 v-model 的组件（核心用法），它应该如下：

带有v-model的父组件通过绑定的value值（即v-model的绑定值）传给子组件，子组件通过 prop接收一个 value;
子组件利用oninput事件实时通过 $emit 触发父组件input 事件，并传入新值value给父组件；

父组件

子组件child

到此这篇关于vue3 封装自定义组件v-model的文章就介绍到这了,更多相关vue3 自定义组件v-model内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！