vue 自定义指令

vue2和vue3自定义指令有些差异，但在使用指令时都大差不差的。

1. vue2自定义指令

1.1 定义指令文件【directive.js】

import Vue from "vue";
const directive = {
  name:"title",
  bind(el,bind){
    // 指令第一次绑定到元素时调用
    // el:  绑定指令的dom节点
    // bind: 指令信息
  },
  inserted(el, bind) {
    // 被绑定元素插入父节点时调用
  },
  update(el, bind) {
    // 所在组件的 VNode 更新时调用,指令的值不一定发生了变化，可以通过比较bind里面的oldValue和value值，判断是否变化
  },
  unbind(el) {
    // 销毁时执行
    console.log(el);
  },
}
Vue.directive("title",directive);
export default directive;

 

1.2 引用指令文件，并使用

// js
import title from './directive.js';
export default {
    directive: [title],
    data(){
        return {
            value:"我是传给指令的值"
        }
    }
} 

// html
<div v-title="value">指令的dom节点</div>
　　// 可以自定义传其他的参数 v-directive:[arg]="value"

　　<div v-title:argObj.name.age.tel="value">指令的dom节点</div>

打印对应的信息：

 

 

 

 

 

2. vue3自定义指令

vue3在使用指令时，跟vue2是一样的，都是：【v-directive:[arg]="value"】，而且钩子函数的参数都一样，但在定义时，钩子函数有点不同。

2.1 定义指令文件【directive.js】

const directive = {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created(el, binding, vnode, prevVnode) {
    
  },
  
  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) {}
}
export default directive

 

2.2 引用指令文件，并使用

当使用组合式使用setup时，即<script setup></script>，直接import引用指令文件即可，但切记，名称一定要v开头。

<script setup>
import vTitle from "./directive.js" // 必须使用v开头
</script>

// html
<div v-title="value">xxxxxx</div>

当使用选项式使用setup，即setup(){}，则通过directives

<script>
import title from "./directive.js"
export default {
    directives:{
        title 
    }
}
</script>


// html
<div v-title="value">xxxxxx</div>