美文网首页
24. 插件

24. 插件

作者: 论宅 | 来源:发表于2019-06-04 21:20 被阅读0次

    插件通常为vue添加全局功能,一般有以下几种:

    1. 添加全局方法或者属性
    2. 添加全局资源——指令,过滤器,过渡等等
    3. 通过全局混入来添加一些组件选项,如vue-router
    4. 添加vue实例方法,通过把他们添加到Vue.prototype上实现。
    5. 一个库,提供自己的api,同时提供上面提到的一个或者多个功能。如vue-router

    使用插件

    通过全局方法Vue.user()方法使用插件,它需要你在调用new Vue之前完成。

    // 调用 `MyPlugin.install(Vue)`
    Vue.use(MyPlugin)
    
    new Vue({
      // ...组件选项
    })
    
    // 或者这种传入一些参数
    Vue.use(MyPlugin, { someOption: true })
    

    Vue.use会自动阻止多次注册相同插件。Vue官方的一些插件,如router在检测到vue是可访问的全局变量的时候回自动调用use方法。
    然而在像 CommonJS 这样的模块环境中,你应该始终显式地调用 Vue.use():

    // 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
    var Vue = require('vue')
    var VueRouter = require('vue-router')
    
    // 不要忘了调用此方法
    Vue.use(VueRouter)
    

    开发插件

    Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:

    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 (methodOptions) {
        // 逻辑...
      }
    }
    

    相关文章

      网友评论

          本文标题:24. 插件

          本文链接:https://www.haomeiwen.com/subject/sutdxctx.html