vue自定义组件实现v-moel,谈谈自己的领悟。

之前看了官方文档,对input实现v-model的效果。
自己也效法,依样画葫芦,虽说也实现了效果,但是总觉得自己是搬运照抄,并没有领悟。

官方文档说:自定义组件要实现v-model,需要定制 prop 和 event,即规定v-model将来需要传达的值绑定在哪个变量属性上,组件内部通过$emit触发事件将页面输入的最新数据同步到v-model变量上,

一开始以为$emit触发的事件必须要在外部引用的时候去声明,如下图,组件内部
vue自定义组件实现v-moel,谈谈自己的领悟。

外部引用
vue自定义组件实现v-moel,谈谈自己的领悟。

vue自定义组件实现v-moel,谈谈自己的领悟。

可以看到,方法里我第一个组件定义了onInput函数接收子组件回传来的值,而第二个组件没有声明事件方法,两者都能达到同样的效果。

接着官网又说:允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

所以我大胆的假设,通过model模式我改变input元素里默认的value属性以及event属性,是不是也能达到同样的效果呢?结果如出一辙,所以结论就是:自定义组件实现v-model效果,无需在父组件里声明绑定方法来接收组件内部最新变量的传值。

如图:组件内部定义prop为myvalue,event为myinput,引用组件的时候,无需在父组件里绑定myinput函数

组件内部

vue自定义组件实现v-moel,谈谈自己的领悟。

外部引用

vue自定义组件实现v-moel,谈谈自己的领悟。

效果

vue自定义组件实现v-moel,谈谈自己的领悟。

上一篇:关于vue3的proxy代理的简单实现


下一篇:jquery中attr()和prop()对比,解决复选框第二次失效问题