Vue组件内部如何实现一个双向数据绑定
小编给大家分享一下Vue组件内部如何实现一个双向数据绑定,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
思路:父组件通过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组件内部如何实现一个双向数据绑定有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!