Maison > interface Web > js tutoriel > le corps du texte

Communication entre pairs des composants Vue.js (code)

高洛峰
Libérer: 2017-03-12 11:32:21
original
1359 Les gens l'ont consulté

Cet article présente la communication (code) entre pairs des composants Vue.js

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>componentKnowledge-同级组件通信</title>
    <script src="js/vue.js"></script>
  </head>
  <body>

  <template id="aa">
    <p> 
      I am aa component:{{msg}}
      <input type="button" @click="send" value="SendTo-cc">
    </p>
  </template>

  <template id="bb">
    <p> 
      I am bb component:{{msg}}
      <input type="button" @click="send" value="SendTo-cc">
    </p>
  </template>

  <template id="cc">
    <p> 
      <p>
      I am cc component:{{msg}}/receive data:{{msg2}},{{msg3}}
      </p>
    </p>
  </template>

  <script>
  window.onload=function(){
    let Event=new Vue();
    let aa={//定义组件
      template:&#39;#aa&#39;,
      data(){
        return {msg:&#39;aa data&#39;}
      },
      methods:{ 
        send(){
          Event.$emit(&#39;a-send&#39;,this.msg)
        }
      }
    };

    let bb={//定义组件
      template:&#39;#bb&#39;,
      data(){
        return {msg:&#39;bb data&#39;}
      },
      methods:{ 
        send(){
        Event.$emit(&#39;b-send&#39;,this.msg)
        }
      }
    };

    let cc={//定义组件
      template:&#39;#cc&#39;,
      data(){
        return {
          msg:&#39;cc data&#39;,
          msg2:&#39;&#39;,
          msg3:&#39;&#39;
        }
      },
      mounted(){
        Event.$on(&#39;a-send&#39;,(data)=>{this.msg2=data});
        Event.$on(&#39;b-send&#39;,(data)=>{this.msg3=data});
      }
    };
    let vm=new Vue({
      el:&#39;#app&#39;,
      components:{//注册组件
        aa,
        bb,
        cc
      }
    });
  }
    /*同级组件之间的通信关键总结:
      1:新建一个空的root组件:let Event=new Vue();
        其上有两个方法Event.$emit(&#39;a-fnName&#39;,data)/Event.$on(&#39;a-fnName&#39;,(data)=>{})
      2:发送数据的组件:Event.$emit(&#39;a-fnName&#39;,data)写在组件的methods里,
      3:接收数据的组件:Event.$on(&#39;a-fnName&#39;,(data)=>{}),注意函数格式必须写为箭头函数,不然this指向不是当前组件,一般写在钩子函数里(beforeCreate(){}/created(){}/beforeMount(){}/Mounted(){}/beforeUpdate(){}/updated(){}/beforeDestroy(){}/destroyed(){})
    */
  </script>
    <p id="app">
      <!--使用组件-->
      <aa></aa>
      <bb></bb>
      <cc></cc>
    </p>
  </body>
</html>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal