自定义组件封装 v-model

• v-model 的实质其实就是语法糖

image.png

从上图中我们可以看到v-model=”something”则表示将value值绑定在something上，当值发生改变时触发绑定的oninput事件。oninput事件绑定的函数是将触发oninput事件的目标（该input）的value值赋值给something这个变量。所以：

在vue3中要注意将 prop和event命名更改为modelValue和update:modelValue

image.png

主要的两个步骤:

1.自定义组件创建 props属性 modelValue
2.自定义组件触发update:modelValue事件，并把值传出去

• 下面我们先来封装一个最基础的 TestModel组件

// 自定义一个TestModel组件

• 使用组件

等同于下面语法 默认传入一个modelValue 然后子组件接收这个modelValue

// 引用TestModel组件

• 有时候可能不想叫modelValue，也可以改成其他的名字，需要这样改写一下

// 父组件

子组件接收的props就要改成msg了

// 子组件

• 双向绑定不一定必须是输入框组件，可以自定义各种各样的组件，比如通过click事件改变父组件的值,或者进一步封装 已有v-model功能的组件,比如进一步封装prism-editor

使用

以上就是封装vue3 实现v-model的知识点了，fzs原创，转载请注明出处