Vue组件如何实现双向数据绑定？

本文共计236个文字，预计阅读时间需要1分钟。

思路：通过props将父组件的值传递给子组件，子组件通过$emit通知父组件修改相应的props值。

具体实现如下：

javascriptimport Vue from 'vue';

const component={ props: ['value'], template: ``, methods: { handleInput(event) { this.$emit('update:value', event.target.value); } }};

思路：父组件通过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组件内部实现一个双向数据绑定的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对自由互联网站的支持！