Vue组件内部实现一个双向数据绑定的代码示例
发布时间:09/01 来源:未知 浏览:
关键词:
思绪:父组件通过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组件内部实现一个双向数据绑定的代码示例的具体内容,更多请关注百分百源码网其它相关文章!