vue3通过vue.use创建自定义指令

前言

大家经常看到如下用法：

但是axios就不需要用这种方式引入，而是直接使用，原因是 axios 没有 install。

1. 自定义指令：

以自定义指令举例，也可以自定义组件。

  install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数

const Loading = {
  // install 是默认的方法。当外界在 use 这个组件的时候，就会调用本身的 install 方法，同时传一个 Vue 这个类的参数。
  install: function(Vue) {
    Vue.directive(
      'loading', {
        inserted: function(el) {
          el.addEventListener('click', () => {
            if (!el.disabled) {
              el.disabled = true;
              setTimeout(() => {
                el.disabled = false;
              }, 5000);
            }
          });
        }
      }
    );
  }
};
// 导出
export default Loading;

main.js引入，并通过Vue.use() 使用指令

import Loading from './directive/loading/index';
Vue.use(Loading);

vue页面引用自定义指令v-loading

<el-button class="submit-btn" type="primary" @click="handleLogin()"  :disabled="btnDisabled" v-loading >登 录</el-button>

在vue3中创建自定义指令普通的三种方式：

1. 如果是在<script setup>定义组件内的指令，有一个语法糖可以使用：任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令，然后在模板中使用。举一个简单的例子：在输入框渲染后自动聚焦

<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

2. 如果是使用选项式，则自定义指令需要在directives选项中注册。同上一个例子：

<script>
export default{
  setup() {},
  directives: {
    // 指令名
    focus: {
      // 生命周期
      mounted(el) {
        // 处理DOM的逻辑
        el.focus();
      },
    }
  }
}
</script>
<template>
  <input v-focus />
</template>

3. 除了注册组件内指令，我们还可以自定义全局指令，这样在所有的组件中都可以使用该指令

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
})
app.mount('#app')

指令的生命周期和组件的生命周期类似：

app.directive('focus', {
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
})

注意指令没有beforeCreated钩子。

• created：在绑定元素的属性前，或者事件监听器应用前调用

• beforeMount：在元素被插入到DOM前调用，例如我们想要实现输入框的自动聚焦，就不能在beforeMount钩子中实现

• mounted：在绑定元素的父组件以及自己的所有子节点都挂载完毕后调用，这个时候DOM已经渲染出来，我们实现输入框自动聚焦也是在这个钩子函数中实现

• beforeUpdate：绑定元素的父组件更新前调用

• updated：在绑定元素的父组件以及自己的所有子节点都更新完毕后调用

• beforeUnmount：绑定元素的父组件卸载前调用

• unmounted：绑定元素的父组件卸载后调用

勾子的参数：

created(el, binding, vnode, preVnode) { }

• el：指令绑定到的DOM元素，可以用于直接操作当前元素，默认传入钩子的就是el参数，例如我们开始实现的focus指令，就是直接操作的元素DOM

• binding：这是一个对象，包含以下属性：

• value：在元素上使用指令时，传递给指令的值。例如：<div v-reverse="'hello'"></div>，传递给reserve指令的值就是hello，我们可以拿到值并做相关处理

• oldValue：之前的值，一般用于beforeUpate和updated钩子函数中，例如：beforeUpdate(el, {oldValue: ''})

• arg：传递给指令的参数，非必需，例如<div v-reverse:foo="'hello'"></div>，那么传递给指令的参数就是foo

• modifiers：一个由修饰符构成的对象，例如<div v-reverse.foo.bar="'hello'"></div>，那么该修饰符对象为{foo: true, bar: true}，我们经常使用到的事件修饰符，其实和这个差不多。

• instance：使用该指令的组件实例，注意不是DOM

• dir：指令的定义对象

• vnode：绑定元素的地城VNode

• preVnode：之前的渲染中代表指令所绑定的元素的VNode，一般用于beforeUpate和updated钩子函数中