前端开发小技巧 - 【Vue】 - 将 指令 / 组件 注册为插件(Vue2 + Vue3)
站长
· 阅读数 17
前言
- 不管是
Vue3
还是Vue2
:- 指令一般都是写在
src/directives/index.js
文件中; - 通用型组件都是在
src/components
中;
- 指令一般都是写在
- 一个自定义指令由一个 包含类似组件生命 周期钩子函数 的 对象 来定义。钩子函数会收到指令所绑定元素作为其参数;
一、Vue3 注册方式
1.1、注册指令
1️.1.1、指令 钩子函数 介绍
const myDirective = {
// 在绑定元素的 attribute 前 或 事件监听器应用前 调用
created(el, binding, vnode, prevVnode) {
// 下面会介绍各个参数的细节
},
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件 及 他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件 及 他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {}
}
1.1.2、指令 钩子函数 参数 介绍
- 指令的钩子会传递以下几种参数:
el
:指令绑定到的元素。这可以用于直接操作 DOM。binding
:一个对象,包含以下属性。value
:传递给指令的值。例如在v-my-directive="1 + 1"
中,值是2
。oldValue
:之前的值,仅在beforeUpdate
和updated
中可用。无论值是否更改,它都可用。arg
:传递给指令的参数 (如果有的话)。例如在v-my-directive:foo
中,参数是"foo"
。modifiers
:一个包含修饰符的对象 (如果有的话)。例如在v-my-directive.foo.bar
中,修饰符对象是{ foo: true, bar: true }
。
instance
:使用该指令的组件实例。dir
:指令的定义对象。
vnode
:代表绑定元素的底层 VNode。prevNode
:之前的渲染中代表指令所绑定元素的 VNode。仅在beforeUpdate
和updated
钩子中可用。
1.1.3️、定义指令 并进行 全局注册
- 这里就写几个简单指令做个示范(开发中也能用到):
- 图片懒加载指令;
- 图片显示异常时显示默认图片;
- 目标文件:
src/directives/index.js
;
import { useIntersectionObserver } from '@vueuse/core';
// TODO 图片懒加载指令
export const imgLazyPlugin = {
install (app) {
// app.directive('指令名字', 指令配置对象);
app.directive('img-lazy', {
// mounted:指令的钩子函数
// el:指令绑定的元素,此处指 img 标签
// binding:binding.value 指令表达式的值,此处指图片的地址
mounted (el, binding) {
// useIntersectionObserver():VueUse 中 检测 元素是否进入视口区域的函数
// 该方法对元素的监听一直存在,存在内存浪费,除非手动停止
// stop - 可以停止该函数对元素的监听
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
if (isIntersecting) {
el.src = binding.value;
// 当图片加载完毕后,停止对该元素的监听
stop();
};
});
};
});
}
};
// TODO 图片显示异常时,显示默认图片
export const imageErrPlugin = {
install (app) {
app.directive('img-err', {
mounted (el, binding) {
el.src = el.src || binding.value;
// 只有 img 标签才可以使用
if (el.target.tagName !== 'IMG') return;
// 图片加载失败会触发 onerror 事件
el.onerror = () => {
el.src = binding.value;
};
};
});
};
};
1.2、注册组件
- 通用型组件都是放在
src/components
中的; - 如果需要将一些组件注册为插件使用【不需要导入,直接就可以使用,先进行全局注册,再注册为插件】,可以在
src/components
下新建index.js
文件; - 将需要注册的组件,导入到这个
index.js
文件中,进行全局注册; - 举例:
- 先进行全局注册:
- 目标文件:
src/components/index.js
import AVue from './AVue.vue'; import BVue from './BVue.vue'; export default { install (app) { // app.component('组件名字', 组件配置对象(也就是导入的组件)) app.component('AVue', AVue); app.component('BVue', BVue); }; };
- 目标文件:
- 先进行全局注册:
1.3、将 指令 / 组件 注册为 插件
- 目标文件:
src/main.js
;
/**
* 创建一个 Vue3 应用
* 1. 导入 createApp 函数
* 2.编写一个根组件 App.vue 导入到 main.js 中
* 3.基于根组件创建应用实例
* 4.挂载到 index.html 的 #app 容器
**/
// 从 vue 中导入 createApp 函数
import { createApp } from 'vue';
// 导入 根组件 App.vue
import App from './App.vue';
// TODO 将所有的指令进行导入,统一注册
// 此处的 directivesPlugin 是个对象
import * as directivesPlugin from '@/directives';
import componentPlugin from '@/component';
// 通过 createApp() 创建 应用实例
const app = createApp(App);
// mount(),将应用实例渲染在容器元素里面
app.mount('#app');
// TODO 注册全局指令插件
Object.keys(directivesPlugin).forEach(item => {
app.use(directivesPlugin[item]);
};
// TODO 注册全局组件插件
app.use(componentPlugin);
二、Vue2 注册方式
2.1、注册指令
2.1.1、指令钩子 函数 介绍
- 一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind
:只调用一次,指令与元素解绑时调用。
2.1.2、指令 钩子函数 参数 介绍
- 指令钩子函数会被传入以下参数:
el
:指令所绑定的元素,可以用来直接操作 DOM。binding
:一个对象,包含以下 property:name
:指令名,不包括v-
前缀。value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如v-my-directive="1 + 1"
中,表达式为"1 + 1"
。arg
:传给指令的参数,可选。例如v-my-directive:foo
中,参数为"foo"
。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
。
vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。
- 🔺 注意: 除了
el
之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的dataset
来进行。
2.1.3、定义指令
- 目标文件:
src.directives/index.js
:
// 负责管理所有的自定义指令
// 只负责导出指令对象
// 变量名称就是指令名称
export const imageerror = {
// 指令内容
// 指令作用在 图片上的 dom是图片对象
// inserted 在Vue3中也改名 => mounted
inserted(dom, options) {
// inserted执行的之后 此时 并没有对 src赋值
// 图片有地址 但是地址加载图片失败的时候 会执行一个函数 onerror
dom.src = dom.src || options.value
dom.onerror = function() {
// 监听onerror事件
// options.value就是指令传过来的值
dom.src = options.value // 当图片异常的时候 接收指令传过来的值 让这个值作为头像的备选
}
// 只有src有值 并且加载失败才会触发onerror
},
// 此钩子会在给image赋值之后执行
// 这个钩子函数在Vue3中改名了 => updated
componentUpdated(dom, options) {
dom.src = dom.src || options.value
}
}
// 自定义全屏指令
export const fullSscreen = {
inserted(dom, options) {
dom.addEventListener('click', () => {
if (dom.tagName !== 'BUTTON') {
return
}
// 判断是否处于全屏状态
if (document.fullscreen) {
return document.exitFullscreen()
}
document.documentElement.requestFullscreen()
})
},
}
// 自定义打印指令
export const printNb = {
inserted(dom, options) {
dom.addEventListener('click', () => {
console.log(options)
let body = document.body.innerHTML // 保存原来的 页面的内容
document.body.innerHTML = document.querySelector(`#${options.value.id}`).innerHTML // 打印我们需要的内容部分
window.print()
document.body.innerHTML=body // 打印后在还原为原来的内容
})
}
}
2.2、注册组件
import AVue from './AVue.vue';
import BVue from './BVue.vue';
export default {
install(Vue) {
Vue.component('AVue', AVue);
Vue.component('BVue', BVue);
}
};
2.3、将 指令 / 组件 注册为插件
import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'
import * as directives from '@/directives'
import Components from '@/components'
import '@/permission' // permission control
// directives是所有指令的一个集合
Object.keys(directives).forEach(key => {
// key就是指令名称
Vue.directive(key, directives[key])
})
Vue.use(Components) // 注册自己的自定义组件
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})