什么是插件
1.什么是插件?
官方解释 插件通常用来为Vue添加全局功能。插件的功能范围没有严格的限制---一般有下面几种
添加全局方法或者属性 如:
vue-custom-element
添加全局资源:指令|过滤器|过渡等 如
vue-touch
通过全局混入来添加一些组件选项 如
vue-router
添加Vue实例方法 通过他们添加到Vue.property上实现
一个库 提供自己的API 同时提供上门提到的一个或多个功能 如
vue-router
插件分类
vue插件的编写方法一般分为4类,如上图所示。主要注册与绑定机制如下:
export default { install(Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性,如: vue-custom-element // 逻辑... } Vue.directive('my-directive', { // 2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) Vue.mixin({ created: function () { // 3. 通过全局 mixin方法添加一些组件选项,如: vuex // 逻辑... } ... }) Vue.prototype.$myMethod = function (options) { // 4. 添加实例方法,通过把它们添加到 Vue.prototype 上实现 // 逻辑... } }}
上方代码使用了es6部分语法列出了4种编写插件的方法,而install是注册插件主要调用的方法,包含了两个参数(Vue实例和自定义配置属性options),我们可以将以上代码存储到plugins.js中。
插件的使用方法
通过全局方法Vue.use()使用插件。它需要在腻调用new Vue()
之前完成
import MyPlugin from './plugins/plugins.js' //调用Myplugin.install(Vue) vue.use(Myplugin) new Vue({ //...组件选项 })
为防止多次注册同一个插件 :我们可以传递一个可选的对象
Vue.use(Myplugin,{someOption:true})
Vue.use 会自动阻止多次注册相同插件,届时即使多次调用也只会注册一次该组件
vue插件的编写方法
上面我们提到了插件编写的四种方式,接下来我们对其一一讲解:
1.添加全局方法或者属性
export default { install(Vue, options) { Vue.$myTitle = '标题'; } }
在install方法中,我们直接在Vue实例上声明了$myTitle属性并进行了赋值,当该插件注册后只要存在Vue实例的地方你都可以获取到Vue.$myTitle的值,因为其直接绑定在了Vue实例上。
2.添加全局资源
export default { install(Vue, options) { Vue.directive('focus', { bind: function() {}, // 当绑定元素插入到 DOM 中。 inserted: function(el, binding, vnode, oldVnode) { // 聚焦元素 el.focus(); }, update: function() {}, componentUpdated: function() {}, unbind: function() {} }); },}
添加全局资源包含了添加全局的指令/过滤器/过渡等,上方代码我们通过Vue.directive()添加了一个全局指令v-focus,其主要包含了5种方法,其中inserted代表当绑定元素插入到 DOM 中执行,而el.focus()代表聚焦绑定的元素,这样如果我们在一个input输入框上绑定该指令就会自动进行focus聚焦。
3.添加全局mixin方法
export default { install(Vue, options) { Vue.mixin({ methods: { greetingFn() { console.log('greeting'); } } }); },}
mixin代表混合的意思,我们可以全局注册一个混合,其会影响注册之后创建的每个 Vue 实例,上方代码注册后会在每个组件实例中添加greetingFn方法,在单文件组件中可以直接通过this.greetingFn()调用。当然如果实例中存在同名方法,则mixin方法中创建的会被覆盖,同时mixin对象中的钩子将在组件自身钩子之前调用。
4.添加实例方法
export default { install(Vue, options) { Vue.prototype.$myTitle = '标题'; Vue.prototype.showMyTitle = value => { console.log(value); }; },}
添加实例方法是最常用的一种方法,其直接绑定在vue的原型链上,我们可以回想一下 JS 里的类的概念。实例方法可以在组件内部,通过this.$myMethod来调用。