1.@click.native
父组件要引用子组件中的点击事件，可以通过@click.native来直接访问子组件中的方法，如果不使用@click.native可在子组件中使用this.$emit('click')来传递事件
// 父组件
<template>
<div>
<span>父组件页面</span>
<search @click="onSubmit"></search>
</div>
</template>
<script>
</script>
// search.vue 子组件
<template>
<div>
<button @click="onSubmit">点击查找</button>
</div>
</template>
<script>
onSubmit(){
alert('show')
}
</script>
父组件中修改成@click.native="onSubmit"
// 父组件
<template>
<div>
<span>父组件页面</span>
<search @click.native="onSubmit"></search>
</div>
</template>
<script>
</script>
以上这种场景在父组件中使用@click是没法触发search中的click事件的，如果要直接触发子组件需要在父组件使用@click.native
至于为什么加上.native就可以直接触发事件，是因为使用.native之后父级组件可以像处理原生的DOM事件一样通过 v-on 监听子组件实例的任意事件(@即为v-on:的简写)，如果不加natvie，会认为监听的是来自子组件search.vue自定义的事件，然而子组件内也没有使用$emit()来将子组件的触发事件抛出，因此onSubmit()方法没有执行
2.@click.stop阻止冒泡
<template>
<div @click="onClick">
<button @click="onSubmit">点击查找</button>
</div>
</template>
<script>
onSubmit(){
alert('onSubmit')
}
onClick(){
alert('onClick')
}
</script>
以上这种场景点击搜索按钮我们会发现会先弹窗onClick，在弹窗onSubmit，事件冒泡到上级甚至更多的上级，这不是我们想要的，要解决以上冒泡的情况，就要使用到@click.stop了，通过@click.stop="onSubmit"来解决事件向上冒泡的情况
<template>
<div @click="onClick">
<button @click.stop="onSubmit">点击查找</button>
</div>
</template>
<script>
onSubmit(){
alert('onSubmit')
}
onClick(){
alert('onClick')
}
</script>