内容提要:
- 使用一个插件
- 如何写一个插件
插件常常为Vue添加全局级功能。插件没有严格定义的作用域 - 通常有几种类型的插件:
- 添加一些全局的方法或属性。例如: vue-custom-element
- 添加一个或多个全局资源:指令/过滤器/过渡 等等. 例如:vue-touch
- 通过全局mixin添加一些全局组件项。例如。vue-router
- 添加一些Vue实例方法,通过把他们添加到Vue.prototype上实现。
- 一个提供自有API的库,同时注入上面提到的一些功能的组合。例如:vue-router
使用一个插件
通过调用Vue.use()
全局方法使用插件。做这个之前你需要通过new Vue()
启动你的应用。
// calls 'MyPlugin.install(Vue)'
Vue.use(MyPlugin)
new Vue({
// ... options
})
你也可以传入一些选项对象:
Vue.use(MyPlugin, { someOption:true })
Vue.use
会自动阻止你使用相同的组件注册多次,所以当你调用相同的组件多次的时候只会安装一次。
如果Vue作为一个全局变量是可用的,那么通过Vue.js官方提供的插件将自动调用Vue.use()
,例如vue-router
,然而,例如在CommonJS的模块环境中,你总是需要显式的调用Vue.use()
:
// 当你通过Browserify 或 Webpack 使用CommonJS
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘记调用这个
Vue.use(VueRouter)
awesome-vue收集类大量社区贡献的插件和库。
写一个插件
一个Vue.js 插件应该提供一个install
方法。这个方法的第一个参数是Vue的构造器。连同其他可能的操作:
MyPlugin.install = function (Vue, options) {
// 1.增加一个全局方法或属性
Vue.myGlobalMehtod = function () {
// 一些逻辑...
}
// 添加一个全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldValue) {
// 一些逻辑...
}
})
// 3. 注入一些组件选项对象
Vue.mixin({
created: function () {
// some logic ...
}
...
})
// 4.添加一个实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// some logic ...
}
}