学习笔记-vue3自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令

1.可以script标签中直接写指令并调用

<template>
  <div>
    <h1>自定义指令</h1>
    <!-- 自动聚焦指令 -->
    <input type="text" v-model="value" v-focus />
    <!-- 颜色改变指令 -->
    <div v-color="'blue'">test</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  directives: {
    focus: (el) => el.focus(),
    focus: {
      mounted(el) {
        el.focus();
      },
    },
    //mounted 和 update 实现相同的内容
    color: (el, binging) => {
      console.log(binging);
      //传参
      el.style.color = binging.value;
    },
  },
};
</script>

显示到页面中的效果如下图（文本框中聚焦）（字体颜色发生改变）

企业微信截图_16989965548329.png

2.在main.ts文件中全局注册

//main.js中注册全局指令（一个锚点跳转指令，使用的时候直接v-scroll）
app.directive('scroll', {
    mounted(el, binging) {
        el.addEventListener("click", function () {
            (document.getElementById(binging.value)as HTMLElement).scrollIntoView();
          });
    }
  })

3.写到单独的文件中方便管理，在main.ts中引入全局注册，然后直接可以在页面中v-xxx进行调用

//在单独的文件中封装自己的自定义指令，这里封装了两个一个锚点指令，一个自定义颜色指令
export default {
    install(app:any){
      //锚点自定义指令，v-scroll直接使用
      app.directive('scroll', {
        mounted(el:any, binging:any) { 
            el.addEventListener("click", function () {
                (document.getElementById(binging.value)as HTMLElement).scrollIntoView();
              });
        }
      })
      //颜色自定义指令，v-color直接使用
      app.directive('color',{
        mounted(el:any, binging:any) {
          el.style.color = binging.value;
        },
      })
    },
}

//在main.ts中引入注册
import directive from './mixin/scroll'    //这是我自己的文件地址
app.use(directive)

4.指令钩子可以

created ：绑定元素属性或事件监听器被应用之前调用。该指令需要附加需要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用。
beforeMounted ：当指令第一次绑定到元素并且在挂载父组件之前执行。
mounted ：绑定元素的父组件被挂载之后调用。
beforeUpdate ：在更新包含组件的 VNode 之前调用。
updated ：在包含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmounted ：在卸载绑定元素的父组件之前调用
unmounted ：当指令与元素解除绑定且父组件已卸载时，只调用一次。

vue3 自定义指令

学习笔记-vue3自定义指令