Vue3--自定义指令---directive

vue3自定义指令

我们可以定义类似于v-if等相同功能的指令 这里以获取input输入框自动获取焦点功能为例，提供两种方式

一，定义局部指令

在optionsAPI中定义

我们把他定义为v-focus 并应用到input上

<template>
  <div class="app">
    <input type="text" v-focus />
  </div>
</template>

我们需要使用directives,他需要传入对象类型，在里面定义我们想要设置的功能，里面有自定义指令的生命周期函数，和vue2中的生命周期类似，这里使用mounted()，他在应用元素被挂载之后执行，并且有el参数，用于接收当前元素

export default {
    directives: {
      focus: {
        mounted(el) {
          el?.focus();
        },
      },
    },
  };

在compositionAPI中定义

在vue3.2版本的setup语法糖中使用时，我们需要定义一个函数，并且这个函数必须用v开头,其中的生命周期和optionsAPI中的定义方法一样的

<script setup>
  const vFocus = {
    mounted(el) {
      el?.focus();
    },
  };
</script>

指令的生命周期

一个指令定义的对象，Vue提供了如下的几个钩子函数：
created：在绑定元素的 attribute 或事件监听器被应用之前调用；
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用；
mounted：在绑定元素的父组件被挂载后调用；
beforeUpdate：在更新包含组件的 VNode 之前调用；
updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用；
beforeUnmount：在卸载绑定元素的父组件之前调用；
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次；

指令的参数和修饰符

如果我们指令需要接受一些参数或者修饰符应该如何操作呢？
info是参数的名称；
aaa-bbb是修饰符的名称；
后面是传入的具体的值；

<button v-hello:info.aaa.bbb="{name:'kobe',age:30}">{{counter}}</button>

在我们的生命周期中，我们可以通过 bindings 获取到对应的内容

const vHello= {
    mounted(el, bindings) {
      console.log(bindings);
    },
  };

二、定义全局指令

定义全局指令需要app的directive方法，可以在任意组件中被使用

app.directive('unit', {
    mounted(el, bindings) {
      console.log(el, bindings)
    },
  });

使用app.directive()，第一个参数是要自定义的指令名，第二个参数是一个对象，对象内的写法和局部定义是一样的

优化代码

我们可以把它从main.js中提取到一个hello.js文件中,在新建一个index.js文件，里面负责导出所有的自定义指令

export default function directiveUnit(app) {
app.directive('hello', {
    mounted(el, bindings) {
      console.log(el, bindings)
    },
  });
}

import directiveHello from './hello';

export default function directives(app) {
  directiveHello(app);
}

最后在main.js中引入这个index.js，使用app.use()

import { createApp } from 'vue';
import App from './App.vue';
import directives from './01_自定义指令/directives';

const app = createApp(App)
app.use(directives).mount('#app');

这样可以使main.js中的代码变得简洁