Vue子父组件相互通信

子组件

<!-- 子组件模板 -->
<template>
    <div id="app">
        子组件
        <br>
        {{title}}
        <button @click="addCounter">按钮</button>
    </div>
</template>

<script>
    export default {
        name: 'app',
        props:["title"],
        data () {
          return {
            str:" 我是子组件数据",
          }
        },
        components: {

        },
        methods:{
          addCounter(){
            //自定义事件$emit传回根组件，左边为事件名,右边为数据
            this.$emit('addMy',this.str)
          }
        }
    }
</script>

父组件

<!-- 父组件模板 -->
<template>
    <div id="app">
        父组件
        <br>
        {{zi}}
        <!--在父组件内接收子组件定义出来的事件,获取到事件后调用addTotal方法-->
        <!--使用title属性将父组件的msg数据传递到子组件-->
        <Child :title="msg" @addMy="addTotal"></Child>
    </div>
</template>

<script>
    // 导入组件
    import Child from './child'

    export default {
        name: 'app',
        data () {
          return {
            msg:" 我是父组件数据",
            zi:""
          }
        },
        components: {
          Child
        },
        methods:{
          //这里在子组件的事件调用后执行此方法
          addTotal(data){
            this.zi = data;
          }
        }
    }
</script>

同级组件之间通信

<!DOCTYPE html>
　　<html lang="en">
　　<head>
  　　　　<meta charset="UTF-8">
  　　　　<title>componentKnowledge-同级组件通信</title>
  　　　　<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

  　　</head>
　　<body>
    　<div id="app">
　　　　 <!--使用组件-->
　　　　 <aa></aa>
　　　　 <bb></bb>
　　　　 <cc></cc>
　　　</div>

　　<template id="aa">
  　　　　<div>
  　　　　　　我是aa组件:{{msg}}
  　　　　　　<input type="button" @click="send" value="SendTo-cc">
  　　　　</div>
  　　</template>


　　<template id="bb">
  　　　　<div>
  　　　　　　我是bb组件:{{msg}}
  　　　　　　<input type="button" @click="send" value="SendTo-cc">
  　　　　</div>
  　　</template>


　　<template id="cc">
  　　　　<div>
  　　　　　　<div>
  　　　　　　我是cc组件:{{msg}}/receive data:{{msg2}},{{msg3}}
  　　　　　　</div>
  　　　　</div>
  　　</template>

　　<script>
      /*同级组件之间的通信关键总结：
       　　　　　　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(){})

       　　　　*/
      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(){
            var me = this;
            Event.$on('a-send',function(data){
              me.msg2=data
            });
            Event.$on('b-send',function(data){
              me.msg3=data
            });

          }
        };

        let vm = new Vue({
          el:'#app',
          components:{//注册组件
            aa,
            bb,
            cc
          }
        });
      }

  </script>
　　　
</body>
</html>

Vue子父组件相互通信

猜你喜欢