【笔记】Vue3的自定义指令

发表于 更新于 分类于 阅读次数：

前言

Vue3的自定义指令学习笔记

OptionsAPI

生命周期函数 备注
created() 在绑定元素的attribute或事件监听器被应用之前调用
beforeMount() 第一次绑定元素，并在挂载父组件之前调用
mounted() 在挂载父组件之后调用
beforeUpdate() 在绑定元素更新VNode之前调用
updated() 在绑定元素及其子组件更新VNode之后调用
beforeUnmount() 在卸载绑定元素之前调用
unmounted() 在卸载绑定元素之后调用

局部自定义指令

diy：自定义指令名
arg_value：自定义指令的参数值
modifier_value_1、modifier_value_2：自定义指令的修饰符

element：绑定的元素对象
bindings：绑定的参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div v-diy:arg_value.modifier_value_1.modifier_value_2="'value'">文本内容</div>
</template>

<script>
  export default {
    directives: {
      diy: {
        mounted: function(element, bindings) {
          console.log(element.textContent); // 文本内容
          console.log(bindings.value); // "value"
          console.log(bindings.arg); // "arg_value"
          console.log(bindings.modifiers); // {modifier_value_1: true, modifier_value_2: true}
        }
      }
    }
  }
</script>

全局自定义指令

src/main.js
1
2
3
4
5
6
7
8
9
10
import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App);
app.directive("diy", {
  mounted: function(element) {
    ...
  }
})
app.mount("#app");
1
2
3
<template>
  <div v-diy></div>
</template>

CompositionAPI

  • 通过定义一个以v开头的小驼峰命名的对象来定义自定义指令

setup函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div v-diy></div>
</template>

<script>
  
  export default {
    setup: function (attrs, slots, emit) {
      const vDiy = {
        mounted: function(element) {
          ...
        }
      }
      
      return {
        vDiy
      }
    }
  }
</script>

setup语法糖

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div v-diy></div>
</template>

<script setup>
  const vDiy = {
    mounted: function(element) {
      ...
    }
  }
</script>

完成