v-on 绑定自定义事件

每个 Vue 实例都实现了事件接口，即：

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

Vue 的事件系统与浏览器的 EventTarget API 有所不同。尽管它们的运行起来类似，但是 $on 和 $emit 并不是addEventListener 和 dispatchEvent 的别名。

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

 

下面通过个小例子来解释下该怎么进行父子组件间的监听：

1、在子组件绑定 “clickEvent”  绑定事件：

<template>
  <div>
      <a @click="clickEvent">

      </a>
  </div>
</template>

 

2、自组件 methods 里注册监听：

methods: {
  clickEvent () {
     this.$emit('quit'， ‘这个位子是可以加参数的’);
  }
}

 

3、在父组件里，绑定 quit 事件，进行监听：

<template>
  <div>
        <a @quit="quit"></a>
  </div>
<template>

4、methods 里处理事件：

methods: {
  quit (参数) {
     this.$router.push('first-login'); // 跳转到 first-login 页面

　 } 
}