主页 / 网络编程 /

vue3.0自定义指令（drectives)知识点总结

网络编程 2021-07-04 14:07www.168986.cn编程入门
在本篇文章里长沙网络推广给大家整体了一篇关于vue3.0自定义指令（drectives)知识点，有兴趣的朋友们可以学习下。

在大多数情况下，你都可以操作数据来修改视图，或者反之。还是避免不了偶尔要操作原生 DOM，这时候，你就能用到自定义指令。

举个例子，你想让页面的文本框自动聚焦，在没有学习自定义指令的时候，我们可能会这么做。

const app = Vue.createApp({
 mounted(){
  this.$refs.input.focus();
 }, 
 template: `<input type="text" ref="input" />`,
});

在mounted钩子函数里，通过 $refs 获取需要聚焦的 DOM 元素，然后调用 focus 方法完成自动聚焦的功能。

基本使用

上面做法已经实现了我们需要的功能，假如说我们有多个组件都需要这个功能，那我们只能把这段代码复制过去，重新实现逻辑。我们狼蚁网站SEO优化看下如果使用自定义指令，应该怎么做。

const app = Vue.createApp({
 // 通过 v-[自定义指令名称] 绑定自定义指令
 template: `<input type="text" v-focus/>`,
});
// 注册一个全局自定义指令
app.directive('focus',{
 // 当被绑定的元素插入到DOM的时候执行..
 mounted(el){
  el.focus();
 }
})

如上，我们定义了一个全局自定义指令 focus，并通过 v-focus 绑定到需要聚焦的 input 元素上。如果，其他组件或模块也需要聚焦功能，只要简单的绑定此指令即可。

自定义指令的钩子函数

我们在上面定义指令的时候，会发现其中包含了 mounted 钩子函数，指令还提供了如下钩子函数，我们用代码的形式来给大家列出来。

app.directive('directiveName', {
 // 指令绑定元素挂载前
 beforeMount(el) {},
 // 指令绑定元素挂载后
 mounted(el, binding) {},
 // 指令绑定元素因为数据修改触发修改前
 beforeUpdate(el) {},
 // 指令绑定元素因为数据修改触发修改后
 updated(el) {},
 // 指令绑定元素销毁前
 beforeUnmount(el) {},
 // 指令绑定元素销毁后
 unmounted(el) {},
});

效果就不一一列举了，有兴趣大家可以尝试下分别触发这些钩子函数。指令钩子函数大部分与组件很类似，大家可以对比着来看。

动态指令参数

狼蚁网站SEO优化，我们再来看一个例子。

const app = Vue.createApp({
 template: `<div class="box" v-abs-="num" style="position:absolute;" ></div>`,
});
// 在很多时候，你可能想在 mounted 和 updated 时触发相同行为，而不关心其它的钩子，就这样写
app.directive('absTop', (el) => {
 el.style[binding.arg] = '100px';
});

我们在 div 元素上绑定 absTop 指令，div 元素本身定位是 absolute，指令执行让绑定元素的 为 100px。这时候，我想在绑定指令的时候能够传一个参数，使得元素的 值可以根据参数来改变。代码如下

const app = Vue.createApp({
 data() { return { num: 100 } },
 template: `<div class="box" v-abs-="num"></div>`,
});
app.directive('absTop', (el, binding) => {
 el.style. = binding.value + 'px';
});

元素可以通过 v-directive="value" 传入动态参数，指令通过钩子函数的第二个参数 binding.value 来接收参数。

如果其他元素可能不是修改 的值，有可能是 left、right 或者 bottom，那么指令可以动态指定吗？其实也是可以做到的。，我们修改模板为

<div class="box" v-abs:left="num"></div>

然后修改指令本身

app.directive('absTop', (el, binding) => {
 el.style[binding.arg] = binding.value + 'px';
});

在 v-mydirective:[argument]="value" ，arguments 也是可以动态改变的，这样，就可以完美的实现上述要求了。

组件的使用

组件中绑定指令与 DOM元素绑定指令并没有什么不同，指令会获取组件的原生 根DOM 来操作。要注意的是，在 vue3.0 中，组件可能有多个根节点，指令绑定在多根节点组件是有问题的。

局部自定义指令

，再来简单说下局部自定义指令是怎么定义的。

const app = Vue.createApp({
directives: {
  focus: {
   // 指令的定义
   mounted(el) {
    el.focus()
   }
  }
 }
}

局部指令定义和全局指令基本一致，如上所示，在组件中定义 directives 就可以了。


自定义指令可以提取出原生DOM操作的逻辑。所以指令的应用范围主要表现在，当一些操作涉及到 DOM 底层时，而且操作逻辑可能用于多处地方，就适合用指令来封装这些逻辑。

到此这篇关于vue3.0自定义指令（drectives)知识点的文章就介绍到这了,更多相关vue3.0中drectives详解内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！

上一篇：JavaScript实现通讯录功能 下一篇：vue 使用 sortable 实现 el-table 拖拽排序功能

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by