Vue.js中如何基于组件Prop条件式应用自定义指令？

你之前用:v-focus="autofocus"的写法不对，Vue里不能通过给指令加冒号来条件控制，正确的做法是让自定义指令支持接收绑定值，根据值来决定是否执行聚焦逻辑。

步骤1：修改自定义指令 #

把原来的指令改成支持绑定值的版本，同时加上updated钩子，处理autofocus prop动态变化的情况：

app.directive('focus', {
  mounted(el, binding) {
    // 当绑定值为true时执行聚焦
    if (binding.value) {
      el.focus()
    }
  },
  updated(el, binding) {
    // 如果值从false变为true，再次触发聚焦
    if (binding.value && !binding.oldValue) {
      el.focus()
    }
  }
})

步骤2：在组件内正确使用指令 #

直接把prop绑定到指令上，不需要加冒号：

<template>
  <!-- 直接用v-focus绑定autofocus prop -->
  <input v-focus="autofocus" />
</template>

<script setup>
defineProps({
  autofocus: {
    type: Boolean,
    default: false
  }
})
</script>

补充说明 #

• 原生autofocus只在页面初始加载时生效，而自定义指令可以在组件挂载、prop变化时触发，更适合动态控制的场景。
• 如果只需要在组件挂载时判断一次，mounted钩子就够；如果需要响应autofocus的动态变化，必须加上updated钩子。

内容的提问来源于stack exchange，提问作者user116587