Vue之v-on事件修饰符的含义及使用

背景：Vue 拆封了一个组件，在组件里面会使用一个方法来改变父组件传过来的值，

但是在子组件里面操作父组件的数据变更，实在比较麻烦（因为单向数据流），

So 能不能直接在组件上面绑定事件方法呢，因此就在封装的组件上面写了 ：@click="getDataList"

    <DefaultComp
      v-if="dataList.length > 0"
      :dataList="dataList"
      @click="getDataList"
    />

但是绑定的 click 方法会不生效，So 要想解决，就需要用到

v-on 事件修饰符 的 .native 了 ， 接下来就来讲解一下各修饰符的含义及使用。

---

Vue 中绑定事件 v-on:事件类型="方法" ，v-on 简写 @

---

v-on 事件修饰符

<!-- 
  v-on  指令的修饰符 :
    .stop  阻止事件冒泡
    .capture  事件进行捕获
    .prevent  阻止默认事件
    .once  事件只会执行一次
    .self  事件之作用给标签本身
-->
.native   侦听组件根元素上的原生事件

• 事件修饰符

  用来处理事件的特定行为

• 1、<!-- 阻止冒泡 .stop -->

  <button @click.stop = "doThis"></button>

只知作用为：阻止事件冒泡，不知其具体如何使用。

下面来举个栗子：就是外层大的 Div 盒子本身有绑定了一个 click 点击事件，

但是如果内层有一个小的 div 盒子也绑定了一个 click 点击事件的话，

点击小盒子 div 时，会同时触发 大、小盒子身上的两个事件，容易造成交互紊乱。

所以此时就需要在小盒子 div 的事件上添加一个 .stop 修饰符来阻止 大盒子 的事件触发，

让只点击小盒子的 click 事件单独触发，而不触发大盒子身上的点击事件。

<template>
  <div @click="bigClickEvent">
    <!-- 内层小盒子div需要加.stop来阻止事件冒泡以免大、小盒子的事件同时触发 -->
    <div @click.stop="smallClickEvent"></div>
  </div>
</template>

---

• 2、<!-- 阻止默认行为 .prevent -->

  <a @click.prevent = "doThis"></a>

• 3、<!-- 只执行一次 .once -->

  <div @click.once = "incr( )">自增一下</div>

• 4、<!-- 绑定的元素本身触发时才触发回调 .self -->

  <ul @click.self = "incr( )">

    <li>你好世界</li>

  </ul>

• <!--  串联修饰符 -->

  <button @click.stop.prevent = "doThis"></button>

---

@click.native中 .native 的含义与使用

当你给一个 vue 组件绑定事件的时候，要加上 native ，

如果是普通的 html 元素，就不需要

<template>
    <div id="app">
        <ButtonComp @click.native = 'goToNext'>点击跳转</ButtonComp>
    </div>
</template>

<script>
import ButtonComp from '../components/ButtonComp'

export default{
  components:{ ButtonComp },
      
  methods: {
    goToNext() {
      console.log('Go to next');
    },
  },
}
</script>

So，在 组件上 加上 .native 修饰符 就可以使用 methods 内绑定的对应方法了