vue @click.native/stop/prevent

[email protected]
父组件要引用子组件中的点击事件，可以通过@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()方法没有执行

[email protected]阻止冒泡

<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>