快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

Vue父子组件双向绑定传值的实现方法

父子组件之间的双向绑定非常简单,但是很多人因为是从Vue 2+开始使用的,可能不知道如何双向绑定,当然最简单的双向绑定(单文件中)就是表单元素的 v-model 了,例如 它会响应表单元素的 value 属性,当输入框文本改变时,会将 value 值传给 v-model 所绑定的变量,如果同时设置 v-model 和 value , value 属性无效。

公司主营业务:网站建设、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出长清免费做网站回馈大家。

父子组件的自定义双向 v-model

当若干dom封装成组件时,在父组件中使用子组件时,却无法在子组件标签上使用 v-model ,因为子组件标签不是表单元素,这个时候,我们需要自定义我们想要的 v-model 规则。







你学会组件的自定义 v-model 了吗 ? 如果是普通的表单元素,同理,监听表单的 input 或者 change 事件,实时将 value 或者 checked 通过 $emit 传递就可以了。

父子组件的自定义多个双向值

上述例子,是实现单个prop值的双向绑定,当组件的需求需要复杂的操作,需要多个双向值,是如何实现的呢。这里需要用到以前被vue抛弃,后来又回归的 .sync 修饰符。

事实上,这个比 v-model 更加简单







此处需要注意,虽然加上 .sync 即可双向绑定,但是还是要依靠子组件 $emit 去触发 update:prop名 实现修改父组件的变量值实现双向数据流,如果直接对prop的属性直接赋值,依然会出现报错。

事实上, .sync 修饰符是一个简写,它做了一件事情

当需要把一个对象中的属性全部通过 .sync 传入双向数据流时,可以再简便一下写法


当使用这种写法时,会将obj对象中的所有属性都通过独立的props传递给子组件,并监听对应的 update: ,此时在子组件中也要声明对应的props。

总结

以上所述是小编给大家介绍的Vue父子组件双向绑定传值的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


分享文章:Vue父子组件双向绑定传值的实现方法
网页网址:http://6mz.cn/article/pccigc.html

其他资讯