如何在Nuxt插件中获取调用其方法的组件名称

这里提供两种可行的实现方案，根据你的需求选择：

方案一：调用时传入组件实例（简单直接） #

修改组件调用方式，将当前组件实例作为第一个参数传入插件方法，插件内通过实例的$options.name获取组件名称：

插件代码： #

export default (ctx, inject) => {
  inject('doSomething', {
    method1: function(vm, data) {
      // 优先取组件定义的name，没有则显示匿名组件
      const componentName = vm.$options.name || 'Anonymous Component';
      console.log(data, componentName);
    },
    method2: function(vm, data) {
      const componentName = vm.$options.name || 'Anonymous Component';
      console.log(data, componentName);
    },
  });
};

组件调用代码： #

this.$doSomething.method1(this, 'data to display');

方案二：无需额外传参（调整插件注入方式） #

通过将$doSomething设计为一个函数，调用时自动绑定组件实例上下文，无需手动传参：

插件代码： #

export default (ctx, inject) => {
  inject('doSomething', function() {
    // 这里的this指向调用该函数的组件实例
    const vm = this;
    return {
      method1: (data) => {
        const componentName = vm.$options.name || 'Anonymous Component';
        console.log(data, componentName);
      },
      method2: (data) => {
        const componentName = vm.$options.name || 'Anonymous Component';
        console.log(data, componentName);
      },
    };
  });
};

组件调用代码： #

this.$doSomething().method1('data to display');

注意：如果组件没有显式定义name选项，$options.name会返回单文件组件的文件名，匿名组件则返回undefined，所以我们添加了默认值兜底。

内容的提问来源于stack exchange，提问作者larisa.moroz