本文主要为大家详细介绍了vue组件父子间通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
三、组件间通信（$parent $refs）
父组件要想获取子组件的数据：
①在调用子组件的时候，指定ref属性
631ff5d7efa7e38e70dee70b5bff6a3953b801b01e70268453ed301cb998e90c
②根据指定的引用的名字 找到子组件的实例对象
this.$refs.myson
子组件要想获取父组件的数据：
①直接读取
this.$parent
通过this.$refs拿到子组件的数据
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>组件间通信-01</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<dahua></dahua>
</p>
<script>
//vue提供的ref
vue.component("dahua",{
data:function(){
return{
mysonname:""
}
},
methods:{
//通过$refs拿到指定的所引用的对应的组件的实例对象
getsonname:function(){
this.mysonname = this.$refs.myson.name;
}
},
template:`
<p>
<h1>这是父组件</h1>
<button @click = "getsonname">获取子组件数据</button>
<span>{{mysonname}}</span>
<hr>
<xiaohua ref="myson"></xiaohua>
</p>
`
})
// 创建子组件
vue.component("xiaohua",{
data:function(){
return{
name:"小花"
}
},
template:`
<h1>这是子组件</h1>
`
})
new vue({
el:"#container",
data:{
msg:"hello vuejs"
}
})
</script>
</body>
</html>
子组件通过$parent获取父组件的数据
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>组件间通信-02</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<dahua></dahua>
</p>
<script>
//创建子组件
vue.component("dahua",{
data:function(){
return{
myname:"大花"
}
},
template:`
<p>
<h1>这是父组件</h1>
<hr>
<xiaohua></xiaohua>
</p>
`
})
//创建子组件
vue.component("xiaohua",{
data:function(){
return{
msg:""
}
},
template:`
<p>
<h1>这是子组件</h1>
<p>{{msg}}</p>
</p>
`,
created:function(){
//在子组件创建完成时获取父组件的数据
//保存在msg中在p标签中显示
this.msg = this.$parent.myname;
}
})
new vue({
el:"#container",
data:{
msg:"hello vuejs"
}
})
</script>
</body>
</html>
相关推荐：
php处理父子层级选择问题
react.js 父子组件数据绑定实时通讯实例展示
父子列表的array排序方法解决思路
以上就是详解vue组件父子间通信的详细内容。