vue的插件注册
2019-03-01 本文已影响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')