Vue.js组件之同级之间的通信(代码)

高洛峰
Lepaskan: 2017-03-12 11:32:21
asal
1366 orang telah melayarinya

这篇文章介绍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>
Salin selepas log masuk

Atas ialah kandungan terperinci Vue.js组件之同级之间的通信(代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan