Question

我写了一个插件：

var MyCoolVuePlugin = {
    install(Vue) {
        Vue.prototype.doStuff = function() {
            console.log("I'm a useless plugin")
        }
    }
}

export default MyCoolVuePlugin;

在我的main.js中，我的前端开始并创建了Vue实例，我包含了我的插件：

import Vue from 'vue';
import App from './App';
import MyCoolVuePlugin from './plugin';

Vue.use(MyCoolVuePlugin);

window.vApp = new Vue({
  el: '#app',
  router: Router,
  components: { App },
  template: '<App/>'
});

然后在我的App.vue中，我有一些这样的东西：

<template>
  <div id="app">
    <h1>Is Anybody There</h1>
    <some-other-component />
  </div>
</template>

<script>
import SomeOtherComponent from "./components/SomeOtherComponent";

export default {
    name: "App",
    components: {
        "some-other-component": SomeOtherComponent
    },
    data() {
        ...
    },
    mounted() {
        // How do I access my Vue plugin
        // I can do:
        vApp.doStuff();
        // Or I can do:
        this.$parent.doStuff();
    }
};
</script>

<style lang="scss">
...
</style>

如何访问我的Vue插件，如App.vue的mounted功能所示？当我问＆＃34;我如何＆＃34;我的意思是什么是正确的，推荐的方式？也许我没有去搜索，但到目前为止我还没找到与完成此相关的文档。

Answer 1

当您使用Vue.use()使用插件时，它会调用插件的安装方法，您要在其中向prototype Vue添加方法

这允许使用this.doStuff()

在任何组件中使用此方法

所以你可以在挂钩中接听它

mounted() {
    this.doStuff();
}

我建议您使用$前缀命名原型上附加的属性或方法。

因此，Vue.prototype.$doStuff可以在this.$doStuff的任何组件中访问。这只是一个问题。

Vue的单个文件组件中的插件

1 个答案: