众所周知,在Vue 插件 插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:Vue
开发中,实现一个功能可以有很多种方式可以选择,这依赖于Vue
强大的功能(指令、混合、过滤等)
- 添加全局方法或者 property。如:vue-custom-element
- 添加全局资源:指令/过滤器/过渡等。如 vue-touch
- 通过全局混入来添加一些组件选项。如 vue-router
- 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
- 一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router
vue引入的插件,如 element , 都需要提供 install 方法,因为 Vue.use() 方法会调用插件里的 install 方法
import Vue from 'vue'
import Element from 'element-ui'Vue.use(Element)
全局组件 类似的
全局组件也是同样的做法,在 install 方法里面 进行 组件 注册
import ColorIconComponents from './iconColor.vue'const ColorIcon = {
install: function (Vue) {
Vue.component('ColorIcon', ColorIconComponents)
}
}export default ColorIcon
绑定prototype 数组对象等绑定自定义方法
// path: src/utils/customFn.js
export default {
install(Vue) {
// 数组对象排序 asc-升序 des-降序
Array.prototype.sortListObjByKey = function (key, order = 'asc') {
const that = this
const comparefn = (obj1, obj2) => {
if (order === 'asc') {
return obj1[key] - obj2[key]
} else {
return obj2[key] - obj1[key]
}
}
return that.sort(comparefn)
}
}
}
使用
// path: src/main.js
import customFn from "./libs/customFn";
Vue.use(customFn)
开发插件范式 来源
Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
持续更文,关注我,你会发现一个踏实努力的宝藏前端,让我们一起学习,共同成长吧。
喜欢的小伙伴记得点赞关注收藏哟,回看不迷路
【认识Vue扩展插件】 欢迎大家评论交流, 蟹蟹
推荐阅读
- Python解析参数的三种方法
- Android开发|被面试官逼问的“Android系统启动流程”,该如何回答((从原理分析到面试实战))
- MySQL|深入浅出MySQL灵魂十连问,你真的有把握吗()
- MySQL|来自大厂面试官的MySQL灵魂十连问,你真的有把握全部回答出来吗()
- Client-Go 视频教程持续更新中
- 精益+敏捷,两大管理思路让研发效能「飞」起来|直播回顾
- 39个 Python Datetime 小例子,拯救因时间抓狂的你
- JavaScript|神经网络之智能科学与技术专业
- Tkinter制作股票数据抓取小程序,有点秀!