1. 插件有什么用
通常,我们需要为Vue 添加一些全局的扩展功能,此时就可以使用插件来进行扩展。
所谓全局:即不需要像组件,指令,过滤器那样,每次使用它之前都需要引入一次。对于插件只要在最开始引入一次,在任何组件就可以直接使用。(类似于我们在window上添加的方法属性那样,任何地方都可以用)
插件能实现的功能没有限制,不过常见下面几种:
- 添加全局方法或者属性
- 添加全局资源:组件/指令/过滤器
- 添加Vue实例方法,通过把它们添加到Vue.prototype上实现。
- 库,提供自己的API ,比如 vue-router
2. 插件编写规范
一个Vue插件本质上就是一个JS对象,这个JS对象必须有一个公开的方法,名字为install ,该方法接受两个参数,一个是Vue构造器,一个是可选的选项参数。
MyPlugin.js
let MyPlugin = {}
MyPlugin.install = function(Vue, options) {
// 1. 添加一个全局方法
Vue.sayHello = function() {
return 'Hello 这是Vue的一个全局方法'
}
// 2. 添加一个实例方法
Vue.prototype.$sayBye = function() {
return "Bye 这是一个实例方法"
}
// 3. 注册全局指令
Vue.directive('my-directive', {
bind(el, binding, vnode, oldVnode) {
// 逻辑...
}
})
}
export default MyPlugin
在这个插件中,注册了一个全局方法,一个实例方法和一个指令
3. 使用插件
使用插件即让自定义的插件生效。这需要通过Vue对象的方法 Vue.use(插件对象)。调用use方法必须在实例化Vue对向之前使用。
- Vue.use接受一个参数plugin,它首先会检查这个plugin是否已经注册,如果已经注册,则二次注册是无效的。
- 接着会调用插件的 install方法
main.js
import Vue from 'vue'
import App from '@/components/App'
import 'bootstrap/dist/css/bootstrap.css'
// 引入插件
import MyPlugin from '@/plugins/MyPlugin'
// 使用插件
Vue.use(MyPlugin)
// 实例化Vue对象,注意注册插件一定要在实例化Vue对象之前完成
const vm = new Vue({
el: '#app',
render: h => h(App)
})
App.vue
<template>
<div>
使用插件
<div>
<span class="label label-success">
使用插件中定义的全局方法 === {{ msg1 }} ===
</span>
<br />
<span class="label label-info">
使用插件中定义的实例方法 === {{ msg2 }} ===
</span>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data() {
return {
}
},
computed:{
msg1(){
// 调用插件中注册的全局方法
return Vue.sayHello()
},
msg2(){
// 调用插件中注册的实例方法
return this.$sayBye()
}
}
}
</script>