自定义组件v-model ,说一下他干了个啥

前面有过一个这样的文章, 感觉以前没理解v-model是干嘛用的

这次再解释一把

一个组件上的 v-model 默认会利用 名为 value 的 prop名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突

所以说 下面第一种就等于第二种的效果

image.png

image.png

所以在自定义组件中写一个v-model时,也是同样的道理, 就是给自定义组件内部的input输入框的value和input事件

所以v-model就是做了上面这么个事情, 可以去类比自定义组件中使用v-model

到这我们就知道了 什么是 v-model, 那么 vue3.0 也出来了,自定义组件中使用他是有变化的,我们举一反三

原文的第一句话:

默认情况下,组件上的 v-model 使用 modelValue 作为 propupdate:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称:

其实道理是一样的

vue2

cn.vuejs.org/v2/guide/co…

vue3

v3.cn.vuejs.org/guide/compo…

简单粗暴 三步解决 实现自定义组件实现v-model

image.png

我解说完毕!!!

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14731.html

发表评论

登录后才能评论