javascript - vue.js插件中的全局方法,全局资源和实例方法区别是什么?
仅有的幸福
仅有的幸福 2017-05-16 13:37:57
[Node.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分别有什么区别啊?

仅有的幸福
仅有的幸福

全部回复(3)
phpcn_u1582

我来简单解释一下吧:

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

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

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

阿神
  1. 全局方法 = 类的静态方法

  2. 全局资源 = 全局指令,就是类似于v-for的指令,不过是自定义的

  3. 全局实例方法 = 类的实例方法

第二点请直接看vue自定义指令的章节,1、3 是JavaScript的内容,请自行寻找参考书。

迷茫

看看插件源码就知道了

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号