Vue单文件组件中正确访问自定义插件的方法

你好！咱们先明确最规范的调用方式，再聊聊你当前用的两种方式为什么不推荐：

推荐的正确调用方式 #

因为你在插件的install方法里把doStuff挂载到了Vue.prototype上，这意味着所有Vue组件实例都会继承这个方法。所以在App.vue的mounted钩子中，直接通过组件实例的this调用即可：

<script>
export default {
  mounted() {
    this.doStuff(); // 这就是Vue官方推荐的规范用法
  }
}
</script>

为什么你当前的两种方式不推荐 #

• vApp.doStuff()：依赖全局挂载的window.vApp实例，这种方式会引入全局变量污染，而且组件逻辑不应该依赖全局实例来调用原型方法，不利于代码的可维护性和复用性。
• this.$parent.doStuff()：完全没必要，App.vue作为根组件的子组件，它本身的实例就已经继承了Vue.prototype上的方法，不需要通过$parent去获取。而且如果后续组件层级调整，$parent的指向可能会变化，导致代码耦合性过高。

进阶优化：避免方法名冲突 #

如果担心doStuff这类通用名称和其他插件或组件方法重名，可以给插件方法加上命名空间，修改你的插件代码：

var MyCoolVuePlugin = { 
  install(Vue) { 
    // 把方法放到命名空间下
    Vue.prototype.$myCoolPlugin = {
      doStuff() { 
        console.log("I'm a useless plugin") 
      }
    }
  } 
} 
export default MyCoolVuePlugin;

之后在App.vue中这样调用：

<script>
export default {
  mounted() {
    this.$myCoolPlugin.doStuff(); // 更健壮，避免命名冲突
  }
}
</script>

这种带命名空间的方式也是Vue社区常用的最佳实践，能有效避免不同插件之间的方法名冲突问题。

内容的提问来源于stack exchange，提问作者SomeShinyObject