指令的实体,是一个具有特定钩子函数的对象

注意: Vue2 和 Vue3的自定义指令钩子函数不同
Vue2的文档 https://v2.cn.vuejs.org/v2/guide/custom-directive.html

现在我已经实现了下面这样一个根据数值改变element.style.color的自定义指令。
image.png

1、仅在某个组件中使用自定义指令。
通过 directives属性注册使用
image.png

使用 v-color
image.png

2、在全局使用自定义指令(自定义指令的全局注册)

这里抛出一个问题:
(vue2项目) 既然可以通过directives属性在子组件中注册自定义指令,那是否可以在App.vue中通过directives: { } 注册全局自定义指令?

答案是不可以。注册指令生效,仅作用在App.vue这个根组件上,不会注册到全局。(即,在App.vue这个组件中有效,在子组件中无效)

全局注册的实现:
image.png

image.png

image.png

分别编写指令文件,集中导入,逐个注册,在main.js中引入。其中Vue.directive()是全局指令的注册方式。

基本使用篇,完结。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/kenwao7ahywzvvz6


DiracKeeko
125 声望2 粉丝