vue自定义全局指令和vue自定义非全局指令-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45940312/article/details/125523170

本文探讨了Vue.js框架中如何自定义全局和非全局指令，详细阐述了两者之间的区别和实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue自定义全局指令

<template>
  <div>
    <button v-test v-if="isExists">全局指令指令测试{{text}}</button>
    <button @click="isExists = !isExists">切换按钮状态哦</button>
    <button @click="text = 'xxx'">更新</button>
  </div>
</template>
<script>
import Vue from "vue";

// 注册的指令整个项目可使用 (全局指令)
Vue.directive("test", {
  bind() {
    // 元素初始化
    console.log("bind:", arguments);
  },
  inserted() {
    // 元素插入
    console.log("inserted:", arguments);
  },
  update() {
    // 元素更新 ,不保证子元素更新完成
    console.log("update:", arguments);
  },
  componentUpdated() {
    // 元素更新 ,保证子元素更新完成
    console.log("componentUpdated:", arguments);
  },
  unbind() {
    // 解绑,元素移除
    console.log("unbind:", arguments);
  }
});
export default {
  data() {
    return {
      isExists: true,
      text: "123"
    };
  },
};
</script>

vue自定义非全局指令

<template>
  <div>
    <button v-test1 v-if="isExists">非全局指令测试{{text}}</button>
    <button @click="isExists = !isExists">切换按钮状态哦</button>
    <button @click="text = 'xxx'">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExists: true,
      text: "123"
    };
  },
  directives: {
    test1: {
      bind() {
        // 元素初始化
        console.log("bind", arguments);
      },
      inserted() {
        // 元素插入
        console.log("inserted:", arguments);
      },
      update() {
        // 元素更新 ,不保证子元素更新完成
        console.log("update:", arguments);
      },
      componentUpdated() {
        // 元素更新 ,保证子元素更新完成
        console.log("componentUpdated:", arguments);
      },
      unbind() {
        // 解绑,元素移除
        console.log("unbind:", arguments);
      }
    }
  }
};
</script>