img

vue组件无亲属关系调用方法

2021-08-13 0条评论 3.2k次阅读 JavaScript


组件无亲属(差别)关系调用方法,意思就是不管你是否为兄弟、父子关系,只要调用了定义的方法就能触发

一、inject和provide

任意组件注入:

// @click="closeSearch"
closeSearch() {
    this.reload();
}
// 注入方法
inject: ['reload'],

任意组件接收:

// 接收
provide() {
    return {
        reload: this.reload,
    };
},
methods: {
    reload() {
        console.log('来了么,小老弟')
    }
}

二、vBus

首先,你要创建一个文件

import Vue from "vue";
export default new Vue();

任意组件发射:

import VBus from "@/v-bus";
// 发射方法
VBus.$emit('closeSearchEvent');

任意组件接收:

import VBus from "@/v-bus";
// 接收
created() {
   VBus.$on('closeSearchEvent',() => {
     this.searchName.keyReason = null;
     NProgress.done()
   })
}

💬 COMMENT


🦄 支持markdown语法

👋友