插件
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制。
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)new Vue({// ...组件选项
})
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
- 可以在插件中编写全局过滤器
- 可以在插件中添加全局指令
- 可以在插件中配置全局混入对象
- 可以在插件中添加实例方法
对象.install = function (Vue, options) {// 1. 添加全局过滤器Vue.filter(....)// 2. 添加全局指令Vue.directive(....)// 3. 配置全局混入(合)Vue.mixin(....)// 4. 添加实例方法Vue.prototype.$myMethod = function () {...}Vue.prototype.$myProperty = xxxx
}
案例
plugin.js（编写的插件实现功能）
export default {install(Vue, x, y, z) {console.log(x, y, z)//全局过滤器Vue.filter('mySlice', function (value) {return value.slice(0, 4)})//定义全局指令Vue.directive('fbind', {//指令与元素成功绑定时（一上来）bind(element, binding) {element.value = binding.value},//指令所在元素被插入页面时inserted(element, binding) {element.focus()},//指令所在的模板被重新解析时update(element, binding) {element.value = binding.value}})//定义混入Vue.mixin({data() {return {x: 100,y: 200}},})//给Vue原型上添加一个方法（vm和vc就都能用了）Vue.prototype.hello = () => { alert('你好啊aaaa') }}
}
main.js
// 引入插件
import plugin from ‘./plugin’
// 使用插件
Vue.use(plugin)
引入之后就可以使用插件的功能
