这篇文章主要介绍了vue2封装input组件方式(输入的双向绑定),具有很好的参考价值,希望对大家有所帮助。
vue2封装input组件
重点
首先我们要明白 vue中v-modle 的对于input 做了什么
以上的两行代码,所呈现的效果是一样的。也就是说: v-model=“username” 在input中做了两件事情。
- :value 绑定了值
- @input=“username = $event.target.value” 监听了值的改变
代码示例:
父组件
{{username}}
子组件
vue二次封装input的几种方式
下面就是自己封装input 框实现的效果
在看如何封装之前,先来了解一下v-model是怎么回事。
其实说白了,v-model就是change和value的结合体。
废话不多说,下面就来看一下在vue中如何封装自定义的input组件。
封装原生input
封装el-input
上面的那种方式会在回显数据时有问题。解决办法就是:如果出现异步回显数据那么就需要用计算来作为中间值转换。
VUE高级用法封装input
这种方式更加简洁,并且不会出现第二种封装方式出现的bug。
//这里不能使用v-model,会报子组件不能直接操作父组件传入参数的错误 //使用value的话其实就是做一个回显因为外层的v-model在这里使用已经改变了外层的值了
//正常的使用方式//不用v-model语法糖的方式
这里核心用到了两个方法 attrs 和 listeners 其中 atters 可以把父组件标签上的所有自定义属性(不包括props,tyle,class)同步到当前元素中,listeners 可以把 f-input 标签上的所有方法同步到子组件中当前元素中。
那么上面已经知道 v-model 就是 change 和 value 的语法糖,那在 f-input 上绑定 listeners 就可以读取到 f-input 的 v-model 的 change 事件,atters 可以读取到 f-input 的 v-model 的 value 值。
$ 符号打不出来了,将就着看吧。如果还是不明白 atters和 listeners是怎么回事的可以看一下vue官网中的介绍。
看官网又出了一种封装的写法,感觉挺有意思,在这里记录一下。
默认情况下,组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称
子组件将需要一个 firstName prop 和 lastName prop并发出 update:firstName 和 update:lastName要同步的事件
var Component = { props: { firstName: String, lastName: String }, emits: ['update:firstName', 'update:lastName'], //vue3可以支持多个根元素,所有这个地方不会有报错,vue2是会报错的。 template: ` ` }
firstName:{{firstName}} lastName:{{lastName}}
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持0133技术站。
以上就是vue2封装input组件方式(输入的双向绑定)的详细内容,更多请关注0133技术站其它相关文章!