您现在的位置是:首页 > 文章详情

自定义组件v-model记录

日期:2019-12-28点击:421

在其他一些框架语言中并没有v-model这么强大的指令,这么方便。在react使用value,onchange的方式实现双向绑定明显麻烦很多。所以在学习vue的基础语言语法相对其他来说确实简单了很多了。
在写这篇文章前,因为业务需要自定义组件的封装,就去看了这个关于v-model的自定义组件的实现,我们先看看官方文档的说明。
从官方和技术文章中我们可以知道,v-model是v-bind以及v-on配合使用的语法糖,举个例子

 <input v-model="value"/> <input v-bind:value="value" v-on:input="value=$event.target.value">

这两种方式实现是等价的
现在我们已经了解了v-model是什么东西了,我们除了能在表单组件上实现v-model,能不能在自定义组件实现双向绑定呢呢??

答案是可以的。
vue官方文档的v-model的说明:一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。
也就是说 我们在在自定义组件上使用v-model 的时候 也是 v-bind:value , v-on:input="value=$event.target.value"
这是默认的v-model的形式,我们也可以通过在子组件中的 model上自定义他们的value和event,接下来我们看代码。

//子组件 <template> <div> <input type="text" v-model="checkData"> </div> </template> <script> export default { props: { value: { default: '' } }, computed: { inputData: { get () { return this.value }, set (val) { this.$emit('checked', val) //这个是computed的get set不是我们的重点, 简单来说就是 得值和改值时触发的事件 } } }, model: { prop: 'value', event: 'checked' // 这里是我们通过修改默认的value、 input事件 改成我们要使用 checked } } </script> // 父组件 <template> <div> {{msg}} <a-input v-model="msg"></a-input> </div> </template> <script> import Input from './Input.vue' export default { data () { return { msg: '12321' } }, methods: { }, components: { aInput: Input } } </script> <style lang="scss" scoped> </style>

在上面中我们可以看到v-model在自定义组件的实现。 通过$emit的方式,这样是我们很常见的组件通信、我们通过这样的方式传值。所以在这里我们就修改的值传到父组件去修改了。 我们这里是用computed去实现也是可以的,我们也可以用很多实现的方法,当我们修改的时候,比如watch去触发,核心的还是$emit 将我们想要传的值传给父组件, 还有就是model里的event设置跟$emit对应即可。
这两段代码简单实现了自定义组件的v-model,接下来我们就可以愉快的使用自定义组件的v-model啦

最后还有个.sync修饰符比较类似这个v-model有兴趣的小伙伴可以去看看哦!!!

编者第一次写,如果有不足之处欢迎指正!如果有上面问题也欢迎提问哦

原文链接:https://yq.aliyun.com/articles/741034
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章