自定义指令Custom Directives

2023-12-16 15:40:29
<script setup lang='ts'>
import { ref } from "vue"

const state = ref(false)

/**
 * Implement the custom directive
 * Make sure the input element focuses/blurs when the 'state' is toggled
 *
*/
// 以v开头的驼峰式命名的变量都可以作为一个自定义指令
const VFocus = {
  mounted:(el)=>el.focus(), // el是指令绑定到的元素
  updated:(el,binding)=>{ // 包含传递给指令的值、指令修饰符modifiers(v-directive.upper)、指令参数arg(v-directive:foo)等属性
     binding.value ? el.focus() : el.blur()
  }
}

setInterval(() => {
  state.value = !state.value
}, 2000)

</script>

<template>
  <input v-focus="state" type="text">
</template>

自定义指令的对象提供了7个钩子函数:

created、beforeMounted、 mounted、 beforeUpdate、updated、beforeUnmount、unmounted

大多数情况仅需要使用mounted和updated。

对比vue的8个生命周期:

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted

文章来源:https://blog.csdn.net/content6/article/details/135032080
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。