Skip to content

Latest commit

 

History

History
175 lines (112 loc) · 4.77 KB

事件修饰符.md

File metadata and controls

175 lines (112 loc) · 4.77 KB

事件修饰符

常用的事件修饰符

  • .stop ： 阻止冒泡

  • .prevent ： 阻止默认事件（比如点击超链接，阻止跳转到默认网页）

  • .capture ： 添加事件侦听器时使用事件捕获模式（与冒泡模式相反）

  • .self ：只当事件在该元素本身（比如不是子元素）触发时触发回调

  • .once ：事件只触发一次，之后还原标签本身的行为。

示例：

    <div id="app">

        <!-- 使用  .stop  阻止冒泡 -->
        <div class="inner" @click="div1Handler">
            <input type="button" value="戳他" @click.stop="btnHandler">
        </div>

        <!-- 使用 .prevent 阻止默认行为（跳转到百度首页） -->
        <a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

        <!-- 使用  .capture 实现捕获触发事件的机制：跟冒泡相反，从外到里-->
        <div class="inner" @click.capture="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>

        <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
        <div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>

        <!-- 使用 .once 只触发一次事件处理函数（如下案例只触发一次点击事件，之后还原标签本身的行为） -->
        <a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>

    </div>

.stop 和 .self 的区别：

        <!-- stop 会阻止冒泡行为 -->
        <div class="outer" @click="div2Handler">
            <div class="inner" @click="div1Handler">
                <input type="button" value="戳他" @click.stop="btnHandler">
            </div>
        </div>

        <!-- .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为 -->
        <div class="outer" @click="div2Handler">
            <div class="inner" @click.self="div1Handler">
                <input type="button" value="戳他" @click="btnHandler">
            </div>
        </div>

其他事件修饰符

.native

将原生事件绑定到组件，因为在组件上绑定的事件只会触发组件自定义的事件。

举个🌰：

定义一个Button.vue组件：

<template>
  <button type="button" @click="clickHandler"><slot /></button>
</template>

<script>
export default {
  name: 'button',
  methods: {
    clickHandler () {
      this.$emit('vclick') // 触发 `vclick` 事件
    }
  }
}
</script>

然后在父组件中调用这个组件：

<vButton @click="clickHandler" @vclick="vClickHandler">按钮</vButton>

<script>
import vButton from '@/components/Button'
export default {
  components: { vButton },
  methods: {
    clickHandler () {
      alert('onclick') // 此处不会执行 因为组件中未定义 `click` 事件
    },
    vClickHandler () {
      alert('onvclick') // 触发 `vclick` 自定义事件
    }
  }
}
</script>

从上面可以看到，我们点击这个按钮，只会触发组件的自定义事件 vclick，但是组件的原生事件 click不会触发。

但是如果在调用组件的时候，在原生事件上加上.native那么两个点击事假都会执行。

<vButton @click.native="clickHandler" @vclick="vClickHandler">按钮</vButton>

当然，如果在组件中点击事件抛出的就是click事件，那么原生事件名和自定义事件名重合了，也会触发。

this.$emit('click') // 触发 `click` 事件

.sync

2.3.0+ 新增

通常父组件通过props传递给子组件的属性，子组件是不允许修改的，否则会有警告。

如果做到子组件可以修改父组件传递给子组件的属性呢？

vue 提供 update:my-prop_name 的模式触发事件。

举个🌰：

假如父组件传递给子组件一个属性：visible，来控制子组件内容的是否显示。

而子组件中也有一个按钮来控制这部分内容的是否显示。

由于父子组件同时控制显示与否，那么子组件修改了显示与否后，需要将visible 修改为对应的状态，但是只在子组件中修改是没用的，需要通知父组件更新visible，那么子组件如何通知？

如下，子组件通过

this.$emit('update:visible', false); // false 为 '显示与否状态'

然后父组件需要监听这个事件进行更新 visible：

<drag :visible='show'  @update:visible="val => show = val" />

于是为了方便，vue 提供了一种缩写形式， 即 .sync 修饰符。

<drag :visible.sync='show'  />

通过这种写法，当子组件执行改变 visible 状态后也会改变父组件 visible 的状态。