vue event

1. event(自定义事件):

(1). 点击事件:

# 子组件:
<template>
  <button @click="handleClick">  // click事件,是在组件内部的<button>元素上声明的.
    <slot></slot>
  </button>
</template>
<script>
  export default {
    methods: {
      handleClick (event) {
        this.$emit('on-click', event);
      }
    }
  }
</script>

(2). 父组件方案一($emit触发自定义事件):

<i-button @on-click="handleClick"></i-button>

注:
①. 通过$emit触发自定义的事件on-click,在父级通过@on-click来监听.

(3). 方案二(在父级声明,为了区分原生事件和自定义事件,要用到事件修饰符.native):

<i-button @click.native="handleClick"></i-button>

注:
①. 如果不写.native修饰符,那上面的@click就是自定义事件click,而非原生事件click.
②. 在组件内只触发了on-click事件,而不是click,所以直接写@click会监听不到.