写点什么

Vue 自定义指令(一)初识

作者:Augus
  • 2022-11-07
    天津
  • 本文字数:603 字

    阅读完需:约 2 分钟

前言

我们知道代码的复用代码方式有组件和组合式函数两种形式,前者主要负责模板和逻辑代码的复用,而后者主要负责有状态的逻辑代码。但是我们今天要说的就是另外一种代码复用的方式,那就是自定义指令,他呢主要负责与 DOM 元素相关的复用代码。

自动定义指令

像我们熟知的 vue 自定义指令 v-model、v-if 等等以外,我们还可以根据自己的需求自定义相应的指令。下面我们就让我们来编写一个当前 input 元素被渲染时就自动聚焦的自定义指令吧。


首先,我们要知道在 <script setup> 中任何一个 v 字母开头并且驼峰式命名的变量才能被用作自定义指令。其次,该变量由一个包含类似生命周期的的对象来定义。里面的钩子函数会把该指令所绑定的元素作为入参。


<script setup>const vFocus = {  mounted: (el) => el.focus()}</script>
<template>// 在模板中使用时使用羊肉串命名法 v-focus <input v-focus /></template>
复制代码


上面的代码我们就完成了一个自定义指令了。而他与 input 的 autofocus 属性不同之处在于在 vue 动态插入元素后也会生效。


当然,我们也可以定义一个全局的自定义指令,这样在所有组件内都可以使用了。


const app = createApp({})
app.directive('focus', { mounted(el) { el.focus() }})
复制代码


不过还是提醒大家在需要直接操作 DOM 元素的时候再封装自定义指令,其余情况还是建议大家通过使用 v-bind 获取相应的数据来进行业务处理,这样也会让代码更明了,也会更高效,服务端渲染性能更好。

发布于: 刚刚阅读数: 3
用户头像

Augus

关注

爱瞎搞的软件开发工程师 2021-06-10 加入

某摸鱼集团

评论

发布
暂无评论
Vue自定义指令(一)初识_vuejs_Augus_InfoQ写作社区