【无标题】

@tap事件和@click事件区别

tap和click都是点击事件。不过移动端有太多复杂的功能是click监听不到的，例如，触摸、按住和轻滑。这时候就要用tap方法了。另外，click事假是点击放开之后才触发的，所以时间上会有延迟，大概200-300ms这样，可是我们在移动端的话就比较追求速度，所以就不能出现说有延迟的情况。所以用tap来代替click事件的话，对于针对移动设备的产品都适合。而且，tap还有一个特点就是『事件穿透』，就是你执行完绑定的tap事件之后呢，如果下面如果绑定了其他事件或者是本身就存在点子事件的话，也会默认触发。

uni-list-item标签中使用@tap

为什么我为uni-list-item添加@tap事件后，获得的event总是undiefined？
监听根元素的原生事件，使用 .native 修饰符

<template>
	<view class="content">
		<uni-list>
			<uni-list-item class="news-list" v-for="(item,index) in news" :key="index"  @tap.native="openInfo"
				:data-newsid="item.post_id">
				<image  class="news_image" w :src="item.author_avatar" mode="widthFix" lazy-load='true'></image>
				<view class="">
					<text>{{ item.author_name }}</text>
					<p>{{ item.created_at }}</p>
				</view>
			</uni-list-item>
		</uni-list>
	</view>
</template>

native就是把组件变回原生DOM的一种方式，相当于给组件绑定原生事件。

父组件

<svg-icon icon-class="user" @click="svgClickTag"></svg-icon>
//js methods部分
svgClickTag() {
  console.log('svg-icon click in father.vue')
}
子组件：要想实现父组件内的点击事件，子组件必须监听点击并触发父组件定义的click

<svg :class="svgClass" aria-hidden="true" @click="clickSvgComponent">
  <use :xlink:href="iconName"></use>
</svg>
//js methods部分
clickSvgComponent() {
  this.$emit('click')
}

如果有了native修饰符，那就没有子组件什么事情了

//子组件照常写，不作任何事件绑定，删掉methods
<svg :class="svgClass" aria-hidden="true">
  <use :xlink:href="iconName"></use>
</svg>
 
//父组件
<svg-icon icon-class="user" @click.native="svgClickTag"></svg-icon>
针对vue-element-ui中的el-button

针对vue-element-ui中的el-button

<el-button type="primary" style="width: 100%;" :loading="loading" 
 @click.native.prevent="handleLogin">Sign in</el-button>
//个人认为这个库已经这某些地方把原生的click做了处理了，因为尝试过去掉native，照常成功

vue @click.native和@click.stop和@click.self