Maison >interface Web >js tutoriel >Explication détaillée de la communication entre le parent et l'enfant des composants Vue
Cet article présente principalement en détail les informations pertinentes sur la communication entre le père et le fils du composant Vue. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.
3. Communication entre composants ($parent $refs)
Si le composant parent souhaite obtenir les données du composant enfant :
①Dans Lors de l'appel du composant enfant, spécifiez l'attribut ref
eb1a5c937f0039c5b61d148db634d15f53b801b01e70268453ed301cb998e90c
② Rechercher l'objet instance du composant enfant en fonction du nom de la référence spécifiée
this.$refs.mySon
Si le composant enfant souhaite récupérez les données du composant parent :
① Lisez directement
this.$parent
Récupérez les données du composant enfant via this.$refs
Code :
<!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>
Le composant enfant obtient les données du composant parent via $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>
Recommandations associées :
PHP gère le problème de sélection de niveau parent-enfant
Liste parent-enfant Idées de solutions pour la méthode de tri des tableaux
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!