Vue组件内部实现一个双向数据绑定的实例代码
2019-04-11 09:17
871 查看
思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下:
import Vue from 'vue' const component = { props: ['value'], template: ` <div> <input type="text" @input="handleInput" :value="value"> </div> `, data () { return{} }, methods: { handleInput (e) { this.$emit('input', e.target.value) } } } new Vue({ components: { CompOne: component }, el: '#root', template: ` <div> <comp-one :value1="value" @input="value = arguments[0]"></comp-one> </div> `, data () { return{ value: '123' } } })
总结
以上所述是小编给大家介绍的Vue组件内部实现一个双向数据绑定的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- Angular自定义组件实现数据双向数据绑定的实例
- 【VUE】.NET实现Tree组件双向绑定数据(1)
- 【VUE】.NET实现Tree组件双向绑定数据(3)-资源分配
- 用vue的双向绑定简单实现一个todo-list的示例代码
- Vue 2.0学习笔记:实现组件数据的双向绑定
- 探索vue父子组件实现数据双向绑定失败的原因
- Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
- 【VUE】.NET实现Tree组件双向绑定数据(2)
- vue父组件和子组件通过sync实现双向数据绑定
- vue中子组件向父组件传递数据的实例代码(实现加减功能)
- vue实现数据双向绑定的原理
- Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
- vue.js使用v-model指令实现的数据双向绑定功能示例
- Vue.js的组件(四)父组件与子组件的数据联系 之 双向绑定
- vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
- vue实现数据双向绑定的原理
- Vue2.0实现组件数据的双向绑定问题
- 代码清单7-4是一个比较完整的数据访问组件,下面分析这些代码的具体实现。
- Vue.js实现输入框绑定的实例代码
- vue父子组件传值,实现深度监听对象,双向绑定