Vue3实战笔记(62)—Vue3自定义指令入门:10分钟学会基础用法

62 篇文章 1 订阅
62 篇文章 0 订阅


前言

Vue 3 中自定义指令(Custom Directives)的功能依然强大,但API相较于Vue 2有所改变,更加强调Composition API的使用方式。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。


一、如何在Vue 3中创建和使用自定义指令

下面是如何在Vue 3中创建和使用自定义指令的简要指南,官方的小例子:


<script setup>
// 在模板中启用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

很简单一句话就能用了,我刚开始是没看懂的,这定义了一个函数怎么就能当指令用?测试一下,居然可行。

学过vue2的都知道指令是需要注册的,在没有使用

//局部注册
export default {
  setup() {
    /*...*/
  },
  directives: {
    // 在模板中启用 v-focus
    focus: {
      /* ... */
    }
  }
}

// 注册一个全局自定义指令 `v-focus`,该指令用于输入框自动获取焦点
Vue.directive('focus', {
  // 当绑定元素插入到DOM中时
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  }
})

简化:

对于自定义指令来说,一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为,除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令,如下所示:


<div v-color="color"></div>

app.directive('color', (el, binding) => {
  // 这会在 `mounted` 和 `updated` 时都调用
  el.style.color = binding.value
})

总结

这样,简单的自定义指令就已经学会了。

昨日种种,皆成今我,切莫思量,更莫哀。从今往后,怎么收获,怎么栽。

  • 14
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值