Vue自定义组件

一、什么是指令

一般见到的 以 v-xxx这种形式出现的都是指令，主要常用的就是 v-model 和 v-show 当然总是会有官方指令实现不了的情况。

vue常用指令有:v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等

比如某些特定的场景，这个时候就需要自定义指令了

页面部分地方需要滚动的，可以写一个 命名为“scroll”的自定义组件，

然后在需要的地方加上写好的自定义组件 比如 <div v-scroll> ...</div>

就能快速实现滚动效果。

最多的是用在鉴权上，封好了就在要鉴权显示的地方套上就完事，方便快捷

二、指令的使用

注册一个 'name' 自定义指令：
vue.directive( 'name', function (el, binding) { ... })

页面中写法如下：
<input v-name>

其中，el为该指令作用的DOM节点，

binding为一个对象 里面有property值，

常见的有 ：

name ：指令名 name (是v-name 指令名字中的 name 不是一整个)

value ：绑定值 比如 <div v-name="msg"> 如果data中的代码msg的值是 'hello' return { msg: 'hello' } 绑定值就是data中的msg 所以 value = 'hello'

modifiers ：修饰符 比如 <div v-name.xxx.yyy>中 修饰符对象就是 { xxx:true, yyy: true }

三、使用自定义指令

随便写个例子

页面显示代码

App.vue

<template>
  <v-loading>loadingDirective</v-loading>  
</template>

注册全局指令 自定义组件名字为 loading ， function 为 loadingDirective

@/main.ts

import App from './App.vue';
import { loadingDirective } from '@/directives/loading';

const app = createApp(App);
// 全局注册 V-loading 的自定义指令
app.directive('loading', loadingDirective);
app.mount('#app');

自定义指令的 loadingDirective 内容：

@/directives/loading

import type { Directive } from 'vue';

const loadingDirective: Directive = {
  updated(el, binding) {
    const instance = el.instance; //拿个Vue实例
    if (!instance) return;
    //然后做一些想要做的操作
    ...
    if (binding.oldValue !== binding.value) { //判断是否是点击同一个
    //然后一顿操作
    ...
    }
  },
  unmounted(el) {
    el?.instance?.close();
  },
};

封装完之后就能方便的在想要用的地方使用了，不用自己再重新写。总的来说还是挺方便的