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

Sonder

2021-08-13

656字

2分钟

浏览 (3.4k)

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

任意组件注入：

复制代码

// @click="closeSearch"
closeSearch() {
   this.reload();
}

复制代码

// 注入方法
inject: ['reload'],

任意组件接收：

复制代码

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

首先，你要创建一个文件

复制代码

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()
  })
}

🎯 相关文章