Maison > Article > interface Web > Exemple détaillé de communication entre les composants de vue Explication détaillée de l'enfant et du parent (2)
Continuez l'apprentissage avec une explication détaillée de la communication entre le parent et l'enfant du composant Vue. Cet article présente principalement en détail les informations liées à la communication entre les enfants et les parents entre les composants Vue. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.
2. Communication entre les composants (les composants enfants transmettent des valeurs aux composants parents)
Transmission complète des données via des événements.
①Définir une méthode dans le composant parent pour recevoir la valeur transmise par le composant enfant via l'événement
methods:{ recvMsg:function(msg){ //参数msg就是子组件通过事件出来的数据 } }
②Traitement des événements de liaison Fonction
les événements sont généralement des événements personnalisés
<child-component @myEvent="recvMsg"></child-component>
③Événements déclencheurs dans les composants enfants
事件名,值 this.$emit('myEvent',myPhone) //触发一个叫做myEvent的事件,同时把第二个参数数据传递给事件对应的处理函数
Résumé :
Dans Vue, la relation entre les composants parent et enfant peut être résumée comme des accessoires vers le bas, des événements vers le haut. Le composant parent transmet les données au composant enfant via des accessoires, et le composant enfant envoie des messages au composant parent via des événements.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>组件间通信子传父</title> <script src="js/vue.js"></script> </head> <body> <p id="container"> <p>{{msg}}</p> <parent-component></parent-component> </p> <script> //通过事件的方式传递 // 绑定 -- 触发 Vue.component("parent-component",{ data:function(){ return { sonMsg:"" } }, methods:{ //msg参数要拿子传递的值 recvMsg:function(msg){ console.log("父组件接收到子组件的数据"+msg); this.sonMsg = msg; } }, template:` <p> <h1>这是父组件</h1> <p>子组件传来的数据为:{{sonMsg}}</p> <hr/> <child-component @customEvent="recvMsg"></child-component> </p> ` }) Vue.component("child-component",{ methods:{ sendMsg:function(){ //来触发绑定给子组件的自定义方法 //this.$emit("customEvent");第一个参数触发 //this.$emit("customEvent");第二个参数传值 this.$emit("customEvent","哈哈哈哈"); }, }, template:` <p> <h1>这是子组件</h1> <button @click="sendMsg">senToFather</button> </p> ` }) new Vue({ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>
Mettez une entrée dans le composant enfant et cliquez sur le bouton pour envoyer le contenu saisi par l'utilisateur au composant parent
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>子与父之间的通信</title> <script src="js/vue.js"></script> </head> <body> <p id="container"> <p>{{msg}}</p> <parent-component></parent-component> </p> <script> //创建父组件 Vue.component("parent-component",{ //data属性 data:function(){ return{ sonMsg:"" } }, methods:{ recvMsg:function(msg){ this.sonMsg = msg } }, template:` <p> <h1>父组件</h1> <h4>子组件传递的数据:{{sonMsg}}</h4> <child-component @customEvent="recvMsg"></child-component> </p> ` }) //创建子组件 Vue.component("child-component",{ data:function(){ return { myInput:"" } }, methods:{ sendMsg:function(){ this.$emit("customEvent",this.myInput); } }, template:` <p> <h1>子组件</h1> <input type="text" v-model="myInput"/> <button @click="sendMsg">发送</button> </p> ` }) new Vue({ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>
Recommandations associées :
Explication détaillée de la communication parent-enfant dans le composant vue (1)
Exemple d'utilisation d'éléments iframe dans les composants vue
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!