美文网首页
vue的插件注册

vue的插件注册

作者: 广告位招租 | 来源:发表于2019-03-01 15:41 被阅读0次

    官网搬运工

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

    实际项目中的封装

    // plugin.js中声明
    
    /**
     * 基础服务扩展
     */
    
    import easyFmInput from './components/input/index.vue'
    
    import ajax from './ajax'
    
    import focus from './directives/focus'
    
    import { currency } from './filters/currency'
    
    
    
    let plugin = {
    
        install: (Vue, option) => {
    
            // 注册系统服务
            Vue.prototype.$ajax = ajax
    
            // 注册全局组件
            Vue.component('e-input', easyFmInput)
    
            // 注册全局指令
            Vue.directive('focus', focus)
    
            // 注册全局过滤器
            Vue.filter('currency', currency)
    
            // 注册全局Mixin
            Vue.mixin({
                
            })
        }
    }
    
    export default plugin
    
    // main.js中注册
    
    import utils from './utils'
    Vue.use(utils)
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
    

    相关文章

      网友评论

          本文标题:vue的插件注册

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