Exemple détaillé de communication entre les composants de vue Explication détaillée de l'enfant et du parent (2)-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-26 13:20:30

original

1732 Les gens l'ont consulté

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就是子组件通过事件出来的数据
　　}
}

Copier après la connexion

②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>

Copier après la connexion

③Événements déclencheurs dans les composants enfants

　　　　　　事件名，值
this.$emit(&#39;myEvent&#39;,myPhone)
//触发一个叫做myEvent的事件，同时把第二个参数数据传递给事件对应的处理函数

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!