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

港控/mmm° 2021-12-15 21:03 429阅读 0赞

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

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

this.$parent.$children[0]

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

this.$parent.$children[1]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70 1][]

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;
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70]: /images/20211215/5c1734d4df004451a282f5ca9cb723ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70 1]: /images/20211215/c1c09bdceaf149be95ea6bd396069f78.png