本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于Vue组件内部实现一个双向数据绑定的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | 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组件内部实现一个双向数据绑定的代码示例的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript和java一样吗?有什么区别?
javascript怎么判断是否包含指定字符串
如何中断foreach循环(详细介绍)
javascript是啥
js如何把html转换成图片格式
javascript怎么验证是否为数字
javascript被禁用了怎么办
javascript归属哪个公司
如何使用javascript lastindexof()方法
实例详解javascript中split字符串分割函数
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » Vue组件内部实现一个双向数据绑定的代码示例