解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex,但观摩了一下其他优秀的UI框架,发现使用Vuex会给其他使用者造成麻烦,于是决心找到寻求解决方法,在参考了几篇大牛们文章后,终于找到。
在这将解决方案贴出,希望能帮助到和我一样初次接触Vue这个框架的同行们。
子组件的代码逻辑
<template> <div class="ne-ipt"> <input type="text" v-model="currentValue"> </div> </template> <style lang="less" scoped> @import "../../assets/styles/form/form.less"; </style> <script> export default { name: 'NeIpt', props: { // 接收一个由父级组件传递过来的值 value: { type: String, default: function () { return '' } } }, computed:{ currentValue: { // 动态计算currentValue的值 get:function() { return this.value; // 将props中的value赋值给currentValue }, set:function(val) { this.$emit('input', val); // 通过$emit触发父组件 } } } } </script>
父组件代码逻辑
<template> <div id="button-index"> <ne-ipt placeholder="姓名" v-model="test"></ne-ipt> </div> </template> <style> </style> <script> import NeIpt from './NeIpt' export default { name: 'form-index', data () { return { test: '' } }, components: { NeIpt } } </script>
在修改子组件的currentValue的时候其实通过$emit触发input事件将值传递给调用者的v-model,从而实现双向绑定。
总结
以上所述是小编给大家介绍的解决Vue2.x父组件与子组件之间的双向绑定问题法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
相关文章
vue2.5.2使用http请求获取静态json数据的实例代码
这篇文章主要介绍了vue2.5.2使用http请求获取静态json数据的实例代码,需要的朋友可以参考下2018-02-02Vue自定义表单验证(rule,value,callback)使用详解
这篇文章主要介绍了Vue自定义表单验证(rule,value,callback)使用详解,今天我们讲一讲自定义验证规则具体使用场景和它的三个参数意思和使用,需要的朋友可以参考下2023-07-07vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题
这篇文章主要介绍了vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-07-07详解关于element el-button使用$attrs的一个注意要点
这篇文章主要介绍了详解关于element el-button使用$attrs的一个注意要点,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-11-11Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。下面通过本文给大家介绍Vue开发中常用的三种传值方式父传子、子传父、非父子组件传值,需要的朋友参考下吧2018-08-08
最新评论