欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-28 19:36:12
...
这篇文章介绍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:'#aa',
      data(){
        return {msg:'aa data'}
      },
      methods:{ 
        send(){
          Event.$emit('a-send',this.msg)
        }
      }
    };

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

    let cc={//定义组件
      template:'#cc',
      data(){
        return {
          msg:'cc data',
          msg2:'',
          msg3:''
        }
      },
      mounted(){
        Event.$on('a-send',(data)=>{this.msg2=data});
        Event.$on('b-send',(data)=>{this.msg3=data});
      }
    };
    let vm=new Vue({
      el:'#app',
      components:{//注册组件
        aa,
        bb,
        cc
      }
    });
  }
    /*同级组件之间的通信关键总结:
      1:新建一个空的root组件:let Event=new Vue();
        其上有两个方法Event.$emit('a-fnName',data)/Event.$on('a-fnName',(data)=>{})
      2:发送数据的组件:Event.$emit('a-fnName',data)写在组件的methods里,
      3:接收数据的组件:Event.$on('a-fnName',(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组件之同级之间的通信(代码)的详细内容,更多请关注其它相关文章!

相关标签: Vue.js组件