首頁 > web前端 > js教程 > 主體

Vue.js元件之同級之間的通訊(程式碼)

高洛峰
發布: 2017-03-12 11:32:21
原創
1367 人瀏覽過

這篇文章介紹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>
登入後複製

以上是Vue.js元件之同級之間的通訊(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板