Maison >interface Web >js tutoriel >Exemple détaillé de communication entre les composants de vue Explication détaillée de l'enfant et du parent (2)

Exemple détaillé de communication entre les composants de vue Explication détaillée de l'enfant et du parent (2)

小云云original: 2017-12-26 13:20:301820parcourir

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(&#39;myEvent&#39;,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)

Introduction à la commande v for dans le composant vue Et analyse des problèmes d'alarme lors de l'utilisation de v-for

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la communication parent-enfant du composant Vue (1)Article suivant：Explication détaillée de la communication parent-enfant du composant Vue (1)

Articles Liés

Voir plus