DDR爱好者之家 Design By 杰米
最近在研究如何写一套基于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父组件与子组件之间的双向绑定问题法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年04月19日
2024年04月19日
- Beyond《光辉岁月Beyond精选》[WAV+CUE][480MB]
- 邰正宵1995-用情太深[香港][WAV+CUE]
- 薰妮1984-劲舞的女孩[香港永恒真存珍藏版][WAV+CUE]
- 薰妮1980-相逢有如梦中[香港永恒真存珍藏版][WAV+CUE]
- 吴俊宏.2012-无名的英雄【豪记】【WAV+CUE】
- 周国贤.2016-风起BreezeOut【维高文化】【FLAC分轨】
- 群星.2012-顾听生辉·乐坛大宗师经典半世纪3CD【环球】【WAV+CUE】
- 王瑞霞.1991-绝情雨【名冠】【WAV+CUE】
- 群星.2024-在暴雪时分电视剧影视原声带【SONY】【FLAC分轨】
- 陈楚生.2022-涂鸦森林【华声时代】【FLAC分轨】
- 《张国荣 金曲回顾》[WAV+CUE][460MB]
- 缇ゆ槦銆婃ⅵ閱夊績澹般€媅WAV+CUE][698M]
- 群星《伤心城市·车舞慢嗨》2CD[WAV分轨][1.4G]
- 陈百强.2003-完全陈百强5CD【华纳】【WAV+CUE】
- 蔡依林.2006-舞娘【EMI百代】【WAV+CUE】