Flask接口签名sign原理与实例代码浅析
244
2023-03-19
vue组件父子间通信详解(三)
本文实例为大家分享了vue组件父子间通信的具体代码,供大家参考,具体内容如下
三、组件间通信($parent $refs)
父组件要想获取子组件的数据:
①在调用子组件的时候,指定ref属性
②根据指定的引用的名字 找到子组件的实例对象
this.$refs.mySon
子组件要想获取父组件的数据:
①直接读取
this.$parent
通过this.$refs拿到子组件的数据
代码:
{{msg}}
//vue提供的ref
Vue.component("dahua",{
data:function(){
return{
mySonName:""
}
},
methods:{
//通过$refs拿到指定的所引用http://的对应的组件的实例对象
getSonName:function(){
this.mySonName = this.$refs.mySon.name;
}
},
template:`
{{mySonName}}
`
})
// 创建子组件
Vue.component("xiaohua",{
data:function(){
return{
name:"小花"
}
},
template:`
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
子组件通过$parent获取父组件的数据
{{msg}}
//创建子组件
Vue.component("dahua",{
data:function(){
return{
myName:"大花"
}
},
template:`
`
})
//创建子组件
Vue.component("xiaohua",{
data:function(){
return{
msg:""
}
},
template:`
{{msg}}
`,
created:function(){
//在子组件创建完成时获取父组件的数据
//保存在msg中在p标签中显示
this.msg = this.$parent.myName;
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~