认识Vue扩展插件

  • 认识Vue扩展插件已关闭评论
  • 24 次浏览
  • A+
所属分类:Web前端
摘要

众所周知,在 Vue 开发中,实现一个功能可以有很多种方式可以选择,这依赖于 Vue 强大的功能(指令、混合、过滤、插件等),本文介绍一下插件的开发使用。


众所周知,在 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) {     // 逻辑...   } } 

🎈🎈🎈

🌹 持续更文,关注我,你会发现一个踏实努力的宝藏前端😊,让我们一起学习,共同成长吧。

🎉 喜欢的小伙伴记得点赞关注收藏哟,回看不迷路 😉

🎁 欢迎大家评论交流, 蟹蟹😊