本文摘自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如何动态增加css
vue+axios+php如何实现上传文件功能?
vue路由跳转的三种方式是什么
vue-router是什么
vue的优点是什么
vue.js怎么进行页面跳转?
vue中mounted和created的区别(图文详解)
vue中mint ui是什么?
vue中让子组件修改父组件数据的方法
javascript之ssm+vue前后端分离框架整合实现
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » vue2.0子组件中怎么改变父组件中的值 ?