虽然现在新开的项目大多数都是Vue3框架的,但是在维护一些老项目时还是会用到vue2的,这里我分享一下v-model这个语法糖的一点点用法. Vue中使用v-model指令来实现表单元和数据的双向绑定,一般情况下它包含两个固定操作 (1)v-bind绑定一个value属性 (2)v-on指令给当前元素绑定input事件.这里我要分享一下自定义v-model绑定的属性和事件. `
在这个例子中,我们使用了`model`选项来定义自定义的v-model语法糖,同时指定事件为`update`,绑定属性为`value`。
指定`model`选项后,我们还需要定义一个`value`prop,它表示绑定值。我们将`value`prop设置为字符串类型,并使用默认值设置为`""`。
在方法中,我们定义了一个名为`updateValue`的方法,它将在输入框的值发生变化时被调用。在这个方法中,我们使用`$emit`方法来触发自定义事件`update`,并将输入框的值传递给该事件。
这样,我们就可以在父组件中使用自定义的v-model语法糖,通过`v-model`指令来绑定值。
父组件代码:
总结: 在子组件中添加model属性修改v-model绑定的自定义事件和绑定的属性