vue3学习-自定义指令 和 插件 plugins

自定义指令

指令钩子(都是可选的)

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. el: 指令绑定到的元素， 用于直接操作DOM

2. binding: 一个对象

   1. value: 床底给指令的值，如： v-a=‘1’
   2. oldVlaue:之前的值，仅在 beforeUpdate和updated中使用
   3. arg:传递给指令的参数，如： v-a:foo
   4. modifiers: 一个包含修饰符的对象。如：
   5. instance: 指令的组件实例
   6. dir: 指令定义对象

3. vnode： 代表绑定元素的底层VNode

4. prevNode: 代表之前的渲染中指令所绑定渊的VNode。仅在beforeUpdate 和 updated钩子中国可用。

app.directive('指令名'， 指令对象)

插件

Plugins-一种添加全局功能的工具代码

import { createApp } form 'vue'
const app = createApp({})
app.use(myPlugin, {})

const myPlugin = {
    install(app, options)
}

使用场景：

1. 通过app.component() 和 app.directive()注册到多个全局组件或自定义指令
2. 通过 app.provide() 使用一个资源可被注入整个应用
3. 向app.config.globalProperties中添加一些全局实例属性或方法

示例 i18n

//plugins/il8n.js
export default {
    install(app, options) => {
    app.config.globalPropserties.$translate = (key) => {
        return key.split('.').reduce((o, i) =>{
            if(o) return o[i]
        },options)
    }
}
}