@click.native中 .native 的含义与使用

不爱吃糖的程序媛

发布于 2024-01-18 20:52:48

1380

发布于 2024-01-18 20:52:48

文章被收录于专栏：夏天的前端笔记夏天的前端笔记

vue 当中的 @click.native

.native–侦听组件根元素上的原生事件 作用：给组件绑定原生事件

@click是我们在vue开发中经常用到的事件绑定，而@实际上是 v-on 的简写，而 v-on 则是对 vue 的事件体系封装之后的 API接口

也就是说，在处理DOM原生事件的场合中需要添加额外的标识符

比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加 .native, 事件是不会触发的，因此需要加上 .native 才会触发事件

<el-select
v-model="siteForms.placeName"
    filterable
    remote
    reserve-keyword
    :remote-method="siteRemoteMethod"
    clearable
    placeholder="请选择"
  >
    <el-option
      @click.native="selectPlaceName(item)"
      v-for="item in locationOptions"
      :key="item.placeId"
      :label="item.placeName"
      :value="item.placeName"
    ></el-option>
  </el-select>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-01-18，如有侵权请联系 cloudcommunity@tencent.com 删除

native