javascript - vue.js插件中的全局方法，全局资源和实例方法区别是什么？

问题描述

问 题

http://cn.vuejs.org/v2/guide/...

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (options) {
    // 逻辑...
  }
}

这里面的1，2，4分别有什么区别啊？

解决方案

我来简单解释一下吧：

1 全局方法，即可以理解为 window. myGlobalMethod 一样，通过 Vue.myGlobalMethod 来调用，就是一个定义在 Vue 下的静态方法而已

2 全局资源，示例中即为定义了一个全局指令，具体可参考 vue 的自定义指令章节，并没有什么不同，只是说在你的插件里还定义了一个指令。当然也可定义过滤器等操作，这全看你这个插件要做什么了

4 实例方法，回想一下 JS 里的类的概念，prototype 原型链的含义，没搞明白的话先去看看这些基础内容。
这里可以这么给你解释，实例方法可以在组件内部，通过 this.$myMethod 来调用

这篇关于javascript - vue.js插件中的全局方法，全局资源和实例方法区别是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！