Question

我想制作一个Vue插件，该插件注册一个全局组件并允许该插件方法（可通过this.$magic全局访问）。例如：

src / plugins / magic.js

import Magic from './Magic.vue';

export default {
  install(VueInstance) {
    console.log('Installing');

    VueInstance.component('magic', Magic);
    VueInstance.prototype.$magic = {
      increment() {
        // ???
      },
    };
  },
};

在Magic.vue组件中，有一个开发人员调用this.$magic.increment()时应调用的方法。我不确定该怎么做，Vue文档并没有真正涉及这些细节。

Answer 1

对于州长来说，写“ VueInstance”是错误的，因为交给您的是Vue类函数，而不是Vue的实例。

现在回答您的问题，对我来说这还不是很清楚，我想说您需要使用状态管理系统。

如果我很了解，您想在Vue原型上创建一个方法，该方法将组件的每个实例的另一个方法部分称为“ Magic”。（为什么要说每个实例？因为您无法从Component的定义中调用方法，所以必须实例化该实例才能访问它的方法或数据之一。）

说实话，这似乎太复杂了，但是由于我不知道您的最终目标是什么，因此有一些线索：

您可以为组件创建一个空实例以访问其方法。

从'./Magic.vue'导入魔术；

const myMagic = new（Vue.extend（Magic））;

导出默认值{ install（VueInstance）{ console.log（'正在安装'）;
```
VueInstance.component('magic', Magic);
VueInstance.prototype.$magic = {
  increment() {
    myMagic.method()
  }
};
```
} };

从理论上讲，Magic组件的所有实例都将具有相同的方法，因此可以正常工作，但这不会更改所有实例的状态，在这里您只能访问该方法（因此我看不到用例中，服务/实用程序会更好，请参阅＃2）

使用Magic组件导入的共享状态和共享方法，而不是尝试使用Magic组件中的方法。

Shared.js

export const state = {
  somedata: 0
};

export const methods = {
  inc() {
    state.somedata++
  }
};

Magic.vue

import { state, methods}  from './Shared.js'

export default {
  data() {
    return {
      shared: state
    }
  },
  methods: {
    Something () {
      methods.inc();
    }
  }
};

Plugin.js

import { state, methods}  from './Shared.js'
import Magic from './Magic.vue';

export default {
  install(VueInstance) {
    console.log('Installing');

    VueInstance.component('magic', Magic);
    VueInstance.prototype.$magic = {
      increment() {
        methods.inc()
      }
    };
  }
};

在全球范围内，您可以以这种方式共享它（它是反应性的，因为a为对象提供了对Magic组件数据的引用，它将成为每个实例的sae引用，因此被共享）。

执行＃2，但将vuex与状态，突变或动作一起使用。

最后一点，由于我们不知道您要使用组件的方法做什么，因此很难提供帮助。如果以下答案之一不能解决您的用例，请尝试详细说明。

如何在相关组件上制作Vue插件函数调用方法？

src / plugins / magic.js

1 个答案: