Home > Article > Web Front-end > Detailed explanation of parent-child communication between Vue components
This article mainly introduces the relevant information on the communication between the father and son of the Vue component in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.
3. Communication between components ($parent $refs)
If the parent component wants to obtain the data of the child component:
①In When calling the child component, specify the ref attribute
##eb1a5c937f0039c5b61d148db634d15f53b801b01e70268453ed301cb998e90c
② Find the instance object of the subcomponent based on the name of the specified referencethis.$refs.mySon
If the subcomponent wants to get the data of the parent component:
this.$parent
Get the data of the subcomponent through 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>The child component obtains the data of the parent component through $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>Related recommendations:
PHP handles parent-child level selection problem
react.js Parent-child component data binding real-time communication example display
array sorting method of parent-child list solution Idea
The above is the detailed content of Detailed explanation of parent-child communication between Vue components. For more information, please follow other related articles on the PHP Chinese website!