vue中组件之间相互通信传值的几种方法详解

<!--parent.vue-->
<template>
    <div>
        <h4>我是父组件：</h4>
        <p>这是我自己的数据{{num}}</p>
        <!--通过给子组件传入自定义属性值，传数据用v-bind或者简写形式:号， 传方法可以使用v-on或者简写@符绑定事件-->
        <child :p-num="num" :p-num2="num2" @changePNum="changeNum" />
    </div>
</template>
<script>
    import child from './child.vue'
    export default{
        name: 'parent',
        data(){
            return{
                num: 10,
                num2: 20
            }
        },
        methods:{
            changeNum(n){
                this.num = n;
            }
        }
    }
</script>
<!--child.vue-->
<template>
    <div>
        <h4>我是子组件：</h4>
        <!--第一种可以使用props对象来接收父级传过来的属性-->
        <p>这是通过props接收父级组件传过来的数据{{ pNum}}</p>
        <!--第二种是通过元素的实例属性$attrs获取，没有呗props接收的剩余属性-->
        <p>这是通过组件中的$attrs对象获取父级组件传过来的数据{{ $attrs['p-num2']}}</p>
        <!--第三种是通过当前实例中的$parent属性拿到父级实例对象-->
        <p>这是通过组件中的$attrs对象获取父级组件传过来的数据{{ topNum }}</p>
        <button @click="changeNum">通过$emit改变父级的数据</button>
        <button @click="changeNum2">通过$listeners改变父级的数据</button>
        <button @click="changeNum3">通过$parent改变父级的数据</button>
    </div>
</template>
<script>
    export default{
        name: 'child',
        // 第一种可以使用props对象来接收父级传过来的属性
        props:{
            // 这里写对应的要接收的属性名以驼峰的形式接收
            pNum: {
                type: Number
            }  
        },
        data(){
            return {
                topNum: 0
            }
        },
        created(){
            // 通过使用实例中的$parent拿到父级组件的实例，然后获取值
            this.topNum = this.$parent.num;  
        },
        methods:{
            changeNum(){
                // 这里是通过当前组件中的$emit方法来调用父级传过来的方法，并且可以传入参数
                this.$emit('changePNum', 40);
            },
            changeNum2(){
                // 通过组件中的$listeners中的存储的父级传过来的方法进行调用
                this.$listeners.changePNum(50);
            },
            changeNum3(){
                // 通过组件中的$listeners中的存储的父级传过来的方法进行调用
                this.$parent.changeNum(60);
            }
        }
    }
</script>

<!--parent-->
<template>
    <div>
        <button @click="changeChildANum">通过$refs调用子组件方法更改子组件数据</button>
        <button @click="changeChildBNum">通过$children调用子组件方法更改子组件数据</button>
        <p>这是获取的子组件childA的数据：{{childA_num}}</p>
        <p>这是获取的子组件childB的数据：{{childB_num}}</p>
        <!--这里通过使用ref把组件示例注册到当前组件的$refs中-->
        <child-a ref="childA"/>
        <child-b />
    </div>
</template>
<script>
    import childA from './childA.vue';
    import childB from './childA.vue';
    export default{
        components:{
            childA,
            childB
        },
        data(){
            return {
                childA_num: 0,
                childB_num: 0
            }
        },
        created(){},
        mounted(){
            // $refs 和 $children 都是需要在mounted中才能获取到
            // 这里通过$refs获取注册在里边的子组件实例，并且获取他的数据
            this.childA_num = this.$refs.childA.num
            // 第二种方式通过当前组件示例中的$children获取子组件实例
            this.childB_num = this.$children[1].num;
        },
        methods:{
            changeChildANum(){
                // 这里通过使用$refs中的组件实例调用组件中的方法
                this.$refs.childA.changeNum();
            },
            changeChildBNum(){
                // 这里通过使用$refs中的组件实例调用组件中的方法
                this.$children[1].changeNum();
            }
        }
    }
</script>
<!--child-->
<template>
    <div></div>
</template>
<script>
    export default{
        name: 'childA',
        data(){
            return{
                num: 10
            }
        },
        methods:{
            changeNum(){
                this.num++;
            }
        }
    }
</script>

<!--parent.vue-->
<template>
    <div>
        <child />
    </div>
</template>
<script>
    import child from './child.vue';
    export default{
        // 通过给父级定义一个provide对象，并且定义成一个函数形式，然后返回一个parentData对象，并且对象指向当前组件的一个数据对象上，这样相当于都指向一个对象
        provide(){
            return {
                parentData: this.proVideData
            }
        }
        name: 'Parent',
        components:{
            child
        },
        data(){
            return{
                proVideData: {
                    num, 1,
                    changeNum: null
                }
            }
        },
        created(){
            // 然后通过实例化后把需要被子组件调用到的方法传入进去
            this.proVideData.changeNum = this.changeNum;
        },
        methods:{
            changeNum(){
                this.proVideData.num++;
            }
        }
    }
</script>
<!--child.vue-->
<template>
    <div>
        <p>{{parentData.num}}</p>
        <button @click="parFun">调用父级的方法</button>
    </div>
</template>
<script>
    export default{
        // 子组件通过inject接到祖先组件中的provide广播的数据
        inject:['parentData'],
        name: 'child',
        data(){
            return{
            }
        },
        methods:{
           parFun(){
                // 这里直接执行存储下来的方法
               this.parentData.changeNun();
           } 
        }
    }
</script>

<!--event-bus.js-->
import Vue from 'vue';
// 这里从创建了一个新的vue实例对象
export const EventBus = new Vue();
<!--parent.vue-->
<template>
    <div>
    </div>
</template>
<script>
// 这里引入事件总线
import { EventBus } from './event-bus';
export default{
    data(){
        return{
            eventBusMsg: ''
        }
    },
    created(){
        // 然后给事件总线绑定一个需要监听的方法，类似于发布订阅者的增加订阅
        EventBus.$on("eventBusMsg", (msg) => {
            console.log(msg);
            this.eventBusMsg = msg;
        });
    },
    beforeDestroy(){
         EventBus.$small("eventBusMsg");
    }
}
</script>
<!--sub.vue后代组件-->
<template>
    <div>
        <button @click="eventBusChange">通过事件总线调用组件的方法</button>
    </div>
</template>
<script>
// 其他组件也需要你引入该插件
import { EventBus } from './event-bus';
export default{
    data(){
    },
    created(){
    },
    methods:{
        eventBusChange(){
            //这里是通过eventBus来调用一个订阅的消息方法，并传入值过去
            EventBus.$emit('eventBusMsg', 'childB');
        }
    }
}
</script>