vue @click.native/stop/prevent @submit.prevent @keyup.enter

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>

3.@click.prevent阻止事件的默认行为

<a href="http://www.baidu.com">百度</a>

正常情况下a标签点击后会默认跳转到对应的链接，如果我们要使用a标签，又不想页面发生跳转，则可使用@click.prevent来阻止a标签的跳转行为

<a href="http://www.baidu.com" @click.prevent="nolink">百度</a>
<script>
    nolink(){}
</script>

4.@submit.prevent

<form @submit.prevent="onSubmit"></form>

同上prevent就是阻止默认行为，这里@submit.prevent就是阻止Form表单的默认提交行为，阻止页面的刷新，默认提交行为被阻止后，我们就定义我们自己按钮提交行为

5.@keyup.enter回车触发聚焦

<el-form :model="formData" :rules="rules" @submit.native.prevent ref="login">
    <el-form-item label="" prop="username">
        <el-input
                v-model.trim="formData.username"
                placeholder="请输入用户名"
                auto-complete="on"
                @keyup.native.enter="submit"
        >
            <template slot="prepend"><i class="el-icon-s-custom"></i></template>
        </el-input>
    </el-form-item>

    <el-form-item label="" prop="password">
        <el-input
                v-model="formData.password"
                type="password"
                auto-complete="off"
                @keyup.native.enter="submit"
        >
            <template slot="prepend"><i class="el-icon-lock"></i></template>
        </el-input>
    </el-form-item>
</el-form>

在vue中输入账号和密码，点击回车触发submit事件