时间:2021-05-26
思路:父组件通过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组件内部实现一个双向数据绑定的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了vue实现的双向数据绑定操作。分享给大家供大家参考,具体如下:经典的双向数据绑定修改msg{{msg}}{{"用户修改的数据:"+userAddr
我用Vue.js实现微信朋友圈的一些功能,实现展示朋友圈,评论,点赞。先构造一个vue的实例,对会更改的数据进行双向绑定,我用JSON伪造模版数据,先实现显示朋
​v-model是Vue的一个指令,它提供了input和form数据之间或两个组件之间的双向数据绑定。这在Vue开发中是一个简单的概念,但是v-mo
本文实例讲述了Vue的双向绑定原理与用法。分享给大家供大家参考,具体如下:Vue中需要输入什么内容的时候,自然会想到使用的方式来实现双向绑定。下面是一个最简单的
一、Vue.js简介1、Vue的主要特点:(1)简洁(2)轻量(3)快速(4)数据驱动(5)模块友好(6)组件化(1)简洁下面看一段Angular的实现双向绑定