vue-router路由内组件实例和路由外组件实例互相访问

最新推荐文章于 2024-08-09 16:20:48 发布

大熊猫玩菜刀

最新推荐文章于 2024-08-09 16:20:48 发布

阅读量3.6k

点赞数

分类专栏： vue 文章标签： vue vue-router 组件通信

本文链接：https://blog.csdn.net/u013727805/article/details/94554412

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

各种层级路由之间的通信，首先想到的可能是Vuex，但在某些情况下，我并不想用Vuex，想通过获取组件实例，直接进行交互。

<template>
    <div id="app" v-touch:right="onSwipeRight">
        <xv-header></xv-header>
        <transition :name="transitionName">
            <router-view class="child-view"></router-view>
        </transition>
        <xv-tabs></xv-tabs>
    </div>
</template>

“路由内组件”中获取<xv-header> 组件实例：

this.$parent.$children[0]

<xv-header> 组件中获取“路由内组件”实例，也就是当前页面主体内容那个组件：

this.$parent.$children[1]

this.$parent.$children数组内的组件实例，这个顺序是根据啥排列的呢，顺序很可能不准确，得做个判断！！！我估摸着肯定是根据组件实例化的先后次序来的。

获取到组件实例之后，可以直接调用组件内方法、变量。不知道这样做有没有什么不妥之处......

补充，最后根据组件实例是否包含某个属性或方法进行判断，感觉这样更保险，哈哈：

20190717

开启页面组件缓存之后（keep-alive），发现方法乱套了，这个页面调用的是其它页面的方法，因为已创建的页面组件都被缓存了，方法也被缓存！！

后来直接注册到Vue属性当中了，注册为window级别的全局方法肯定也行。

    //全局组件中调用

    private rightHandler() {
        // this.$parent.$children.forEach(component => {
        //     if (component && component["onClickHeaderRightBtn"]) {
        //         component["onClickHeaderRightBtn"]();
        //     }
        // });
        const handler = Vue.prototype.onClickHeaderRightBtn;
        if (handler && typeof handler == "function") {
            handler();
        }
    }

    // 页面组件中

    activated() {
        // 注册
        this.appService.registerOnClickHeaderRightBtn(this.onClickHeaderRightBtn);
    }

    deactivated() {
        // “销毁”
        this.appService.registerOnClickHeaderRightBtn();
    }

    onClickHeaderRightBtn() {
        //...
    }

    // appService 中

    /**
     * 注册右上角点击事件
     * @param callback
     */
    registerOnClickHeaderRightBtn(callback: Function = () => {}) {
        Vue.prototype.onClickHeaderRightBtn = callback;
    }