zoukankan      html  css  js  c++  java
  • Vue.js组件之同级之间的通信

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


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


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


      <template id="cc">
        <div>
          <div>
          I am cc component:{{msg}}/receive data:{{msg2}},{{msg3}}
          </div>
        </div>
      </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>
        <div id="app">

          <!--使用组件-->
          <aa></aa>
          <bb></bb>
          <cc></cc>
        </div>
      </body>
    </html>

    焦大叔叔
  • 相关阅读:
    机器学习100天——实现简单线性回归(第二天)
    一起学Hive——详解四种导入数据的方式
    一起学Hive——创建内部表、外部表、分区表和分桶表及导入数据
    Apache Pulsar——企业级消息订阅系统介绍
    一起学Hadoop——实现两张表之间的连接操作
    一起学Hadoop——文件的上传、分发与打包
    机器学习100天——数据预处理(第一天)
    java调用python程序以及向python程序传递参数
    页面中查询模块的设计与实现思路
    以前的博客内容迁至CSDN,博客名不变,以后博客将在两个平台同步更新
  • 原文地址:https://www.cnblogs.com/tiny-jiao/p/6527449.html
Copyright © 2011-2022 走看看