本文摘自PHP中文网,作者青灯夜游,侵删。
下面Vue.js教程栏目给大家介绍一下vue2.0中子组件通过v-modal改变父组件中值的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。vue2.0中子组件通过v-modal改变父组件中的值
父组件代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | < template lang = "pug" >
p
p this is father
child(v-model="data")
</ template >
< script >
import child from "./childrenS.vue";
export default{
data(){
return {
data: [1, 2, 3]
}
},
components: {
child
},
watch: {
data(n, o){
console.log(n,o)
}
}
}
</ script >
|
子组件代码:
1 2 3 4 5 6 7 8 9 10 | < template lang = "pug" >
p this is child
</ template >
< script >
export default{
created(){
this.$emit("input",[4,5,6])
}
}
</ script >
|
效果如下:
阅读剩余部分
相关阅读 >>
代码详解vue中key的作用示例
单独引入vue.js文件怎么写组件
如何解决vue 引入字体css报错问题
vue文件怎么打开
vue和react本质的区别是什么
vue脚手架搭建流程
.vue 是什么
vue怎么引用css
vue 轻量级图表组件
vue 的 render 方法中 h 是什么?
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » vue2.0子组件中怎么改变父组件中的值 ?