vue 事件修饰符 .native 阻止组件事件多次调用如el-radio

最新推荐文章于 2023-12-28 13:14:33 发布

A 胡先生 ༽

最新推荐文章于 2023-12-28 13:14:33 发布

阅读量646

点赞数 3

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_45572314/article/details/124489454

版权

在Vue中，使用`@click.native`可以将事件监听器绑定到组件的根DOM元素，而不是组件本身。这样可以捕获到原生的DOM事件，例如在`el-radio-group`组件中监听点击事件。当点击事件触发时，通过`onClick`函数处理，如果事件源为`INPUT`标签则忽略，否则打印选中的`radio`值。`native`修饰符类似于组件内部的`$emit`事件派发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

native获取dom原生事件，一般在组件上使用。

给vue组件绑定事件时，必须加上native。
如

  <el-radio-group v-model="radio" @click.native="onClick($event)">
    <el-radio :label="1">1</el-radio>
    <el-radio :label="2">2</el-radio>
    <el-radio :label="3">3</el-radio>
  </el-radio-group>

<script>
function onClick(events:Event) {
  if ((events.target as HTMLInputElement).tagName === 'INPUT') return;
  console.log(radio)
}
</script>