Vue 3迁移：如何按条件为输入框添加事件修饰符

在Vue3里，原来Vue2那种@[isOpen&&click.stop]的动态事件修饰符写法已经不被支持了，不过咱们可以用更直观的方式实现相同的效果，下面是两种常用方案：

方案一：在事件处理函数中手动控制事件传播 #

这是最推荐的方式，逻辑清晰且符合Vue3的设计思路：

1. 模板中绑定普通的click事件：

<input type="text" v-model="filter" @click="handleInputClick" />

2. 在组件的setup函数（或Options API的methods）中定义处理函数，根据条件判断是否阻止事件冒泡：

// Composition API示例
import { ref } from 'vue'

const isOpen = ref(false)
const filter = ref('')

const handleInputClick = (event) => {
  if (isOpen.value) {
    // 当isOpen为true时，阻止事件冒泡
    event.stopPropagation()
    // 这里可以添加点击后需要执行的其他逻辑
  }
}

方案二：动态绑定事件（适合复杂场景） #

如果需要更灵活的事件绑定逻辑，可以通过对象语法动态绑定事件：

<input 
  type="text" 
  v-model="filter" 
  v-on="isOpen ? { 'click.stop': () => {} } : {}"
/>

这里当isOpen为true时，绑定带.stop修饰符的空点击处理函数；为false时则不绑定该事件。不过这种方式如果需要额外逻辑，还是建议结合方案一的函数写法。

简单来说，Vue3更推荐把事件修饰符的逻辑放到处理函数中，这样代码的可读性和可维护性都更高哦～

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