Vue .stop阻止冒泡实际应用

.stop是Vue中一种事件修饰符，可以阻止事件冒泡，最近开发小程序用到了.stop阻止冒泡

开发过程中发现，如果用户点击红色的区域，选项是无法被选中的，只有当点击文字部分或者圆框部分，才会触发点击事件

看了一下组件的源码，使用的是uniapp开源u-view1.0组件库的u-radio组件，源码如下

<template>
	<view class="u-radio" :style="[radioStyle]">
		<view class="u-radio__icon-wrap" @tap="toggle" :class="[iconClass]" :style="[iconStyle]">
			<u-icon
				class="u-radio__icon-wrap__icon"
			    name="checkbox-mark"
			    :size="elIconSize"
				:color="iconColor"/>
		</view>
		<view class="u-radio__label" @tap="onClickLabel" :style="{
			fontSize: $u.addUnit(labelSize)
		}">
			<slot />
		</view>
	</view>
</template>

我们可以发现，源码中第二行，class="u-radio"这一行是整个行的容器；第二个view容器是选择框的；第3个view容器是我们的文字容器。整行容器没有@tap事件，只有文字和选择框的容器有@tap事件

发现了问题，我们就给第二行class="u-radio"的容器增加一个tap事件

<view class="u-radio" :style="[radioStyle]" @tap="onClickLabel">

测了一下，现在点击空白处也有点击事件了，但是点击文字或者选择框的话，事件会执行两次，这就是因为冒泡了——点击之后，先执行文字或者选择框容器（内部容器）的点击事件，再冒泡到父容器，也就是我们刚刚加的那个tap事件，由此便会执行两次点击事件

我们给内部的tap事件增加.stop修饰符，阻止冒泡

<template>
	<view class="u-radio" :style="[radioStyle]" @tap="onClickLabel">
		<view class="u-radio__icon-wrap" @tap.stop="toggle" :class="[iconClass]" :style="[iconStyle]">
			<u-icon
				class="u-radio__icon-wrap__icon"
			    name="checkbox-mark"
			    :size="elIconSize"
				:color="iconColor"/>
		</view>
		<view class="u-radio__label" @tap.stop="onClickLabel" :style="{
			fontSize: $u.addUnit(labelSize)
		}">
			<slot />
		</view>
	</view>
</template>

再测试，就没有问题了，这就是Vue .stop阻止冒泡实际应用