思路:父组件通过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' } } })
【相关推荐:JavaScript视频教程】
以上就是Vue组件内部实现一个双向数据绑定的代码示例的详细内容,更多请关注php中文网其它相关文章!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论