VUE2.0 观察者模式、父子组件调用

最新推荐文章于 2025-03-24 08:30:00 发布

原创最新推荐文章于 2025-03-24 08:30:00 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

vue2.0 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Vue中组件间的通信方法，包括观察者模式实现的事件总线、父子组件直接调用方法及属性传递，以及如何通过$children访问子组件属性。

一、观察者模式

事件发布： this.$root.eventHub.$emit(事件名称，传递的参数);
订阅事件： this.$root.eventHub.$on(事件名称，(response)=>{ })
取消订阅： this.$root.eventHub.$off(事件名称)

二、父子组件的调用

<!--子组件-->
<template>
    <div @click="callParentFunction">点击调用子组件方法</div>
    <son-component ref="sonModal"></son-component>
</template>
<script>
    export default{
        data(){
            return {
                num:1
            }
        },
        methods:{ 
            /**
             * 初始化数据
             **/
            init(){
                
            },
            /**
             * 调用父组件方法
             **/
            callParentFunction(){
                this.$parent.init();
                //给父子属性赋值
                this.$parent.testNum =1;
            }
        }
    }
</script>
<!--父组件-->
<template>
    <div @click="callSonFunction">点击调用子组件方法</div>
    <son-component ref="sonModal"></son-component>
</template>
<script>
    export default{
        data(){
            return {
                messageList:[],
                testNum:1
            }
        },
        methods:{
            /**
             * 初始化数据
             **/
            init(){
                this.messageList= [1,2,3];
            },
            /**
             * 调用子组件方法
             **/
            callSonFunction(){
                this.$refs.sonModal.init();
                this.$refs.sonModal.num=2;
            }
        }
    }
</script>

三、$children 返回的是一个组件集合 this.$children[i].data 可访问子组件属性