一、 事件的基本使用

1.使用v-on:xxx 或 @xxx绑定事件 其中xxx是事件名

2.事件的回调需要配置在methods对象中 最终会在VM上

3.methods中配置的函数，不需要箭头函数 否则this就不是VM了

4.methods中配置的函数 都是被vue所管理的函数 this的指向是VM 或组件实例对象

5.@click="demo" 和 @click="demo($even,number)"效果是一样的 但是后者可以传参

二、 vue中的事件修饰符

1.prevent：阻止默认事件

2.stop：阻止事件冒泡

3.once：事件只触发一次

4.capture：使用事件的捕获模式

5.self：只有event.target是当前操作的元素时才触发事件

6.passive：事件的默认行为立即执行 无需等待事件回调执行完毕

<div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent：阻止默认事件 -->
        <!-- 阻止链接跳转 -->
        <a href="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15" @click.prevent="showInfo">点我提示信息</a>

        <!-- stop：阻止事件冒泡 -->
        <div @click="showInfo" class="demo1">
            <button @click.stop="showInfo">点我提示信息</button>
            <!--修饰符可以连续写  即阻止冒泡 又阻止跳转 -->
            <a href="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15" @click.stop.prevent="showInfo">点我提示信息</a>

        </div>

        <!-- once：事件只触发一次 -->
        <button @click.once="showInfo">点我提示信息</button>

        <!-- capture：使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div  class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- self：只有event.target是当前操作的元素时才触发事件 -->
        <div @click.self="showInfo" class="demo1">
            <button @click="showInfo">点我提示信息</button>
        </div>

        <!-- passive：事件的默认行为立即执行 无需等待事件回调执行完毕 -->
        <!-- @scroll="demo" 滚动条的滚动 @wheel="demo"鼠标滚轮的滚动-->
        <ul class="list" @wheel.passive="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
     </div>

三、vue中常用的按键别名

回车 enter

删除 delete

退出 esc

空格 space

换行 tab(特殊 必须配合keydown使用)

上 up

下 down

左 left

右 right

1.vue中未提供别名的按键 可以使用按键原始的key值去绑定 但注意要转为kebab-case(短横线命名)

2.系统修饰键(用法特殊) ctrl alt shift meta

配合keyup使用：按下修饰键（win）的同时，再按下其他键 随后释放其他键 事件才被触发

配合keydown使用：正常触发

也可以使用keyCode去指定具体的按键（不推荐）

Vue.config.keyCode.自定义键名 = 键码 可以去定制键码

<div id="root">
       <h2>欢迎来到{{name}}学习</h2>  
       <input type="text" name="" id="" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>

今天这篇文章，让你彻底学会组件自定义事件……

我们在vue中用的click、keyup……等事件，这些属于内置事件，也就是js自带的事件。

问题一：什么是组件自定义事件呢？

【内置事件】是给html元素用的，比如span、div等标签，不是组件。

【自定义事件】 顾名思义就是自己打造的事件，包含事件名，事件回调等，定义好之后去给组件使用。也是一种组件间的通信方式，适用于子组件==>父组件。这里我们通过传值去讲述自定义事件如何使用。

问题二：如何实现子组件给父组件传值？

（1）复习一下props传值

通过props也可以实现，我们先复习一下props传值，稍后说明自定义事件传值

先定义父子组件，school是父组件，student是子组件

 父组件中呢，引入子组件

 

 这是我们定义好的父子组件

 

props传值呢。父组件需要提前给子组件一个函数，子组件用props声明接收那个函数

（i）找到父组件，先定义一个接收子组件数据的函数，并存入我们的变量中

注意：还记得之前讲的props使用的属性吗，使用冒号来区别传入的是双引号里面的内容还是字符串，这里我们传的是一个函数，因此需要用冒号去识别函数名

具体写法对应是：

     <Student  : 子组件发送数据时调用的方法名=" 父组件接收数据的方法名 "></Student>

 （ii）父组件回应完子组件之后，就需要子组件来传递数据了。

找到子组件之后，首先需要用props接收父组件递给的函数。然后给按钮添加点击事件，来触发父组件的函数，并传入你要传递的数据参数。

 （iii）可以看到，这样就成功了，父组件收到子组件传来的学生姓名：张三。

 

 总结：props父组件给子组件传递的过程就是：

子组件通过调用父组件传递进来的接收数据的方法，来实现数据传递。

（2）组件自定义事件实现父子传值

组件自定义事件需要用到v-on，也就是v-on在谁身上，就是在谁的组件实例上绑定了事件。

 （i）同样，我们在父组件中给子组件绑定一个自定义事件

那绑定的myself事件如何触发呢？

答：在谁身上定义的就找谁触发，我们需要找子组件触发

此时子组件就可以注释掉props接收的对象，然后通过$emit去触发。 

emit本身翻译就是发出等意思。

 再传入参数。不传参数就是单纯的触发父组件对应的函数。

 

 父组件接收参数

看下效果：同样可以实现。

补充：

想传入多个参数，怎么办？

有的人说在第一个参数后面接着传不就行了。哈哈，这样是可以，就是如果你想传很多，父组件接收的时候比较麻烦

那怎么办？

假如子组件传了3个参数。

 父组件可以利用es6的三个点（扩展运算符）语法进行接收，

 

 可以看到，用了扩展运算符的params，就可以接收所有参数。

问题三：有的人说我没有见过v-on呀，都是@。

是的，v-on的简写形式就是@

直接这样写就ok。

 问题四：还有第三种方法实现子传父。

那就是ref。很熟悉吧。ref相当于一个组件的标识，可以直接拿到该组件的实例对象。

 先加上一个ref属性，此时我们就可以通过this.$refs.student去找到这个组件

 怎么通过ref去绑定自定义事件呢？
通过$on，稍微有点麻烦，需要传入自定义事件名，以及调用的函数。

 好处是：虽然麻烦但灵活性强。

比如我们想3秒之后再调用这个事件

 我们可以直接添加一个定时器

 问题五：只想触发一次函数，怎么办？

（1）第一种ref形式，将$on 改为$once

 （2）第二种 自定义事件的，添加once修饰符

 此时按钮只能点击一次就不能点击了。

问题六：能自定义绑定事件，能解绑吗？

答：能

有的人说那我不用this.$emit触发不就行了，但是你不解绑，你绑定的这个事件，会一直存在你绑定的组件身上。所以还是解绑最好。（给谁绑定的就找谁解绑）

【解绑单个事件】

在子组件中定义一个解绑按钮

 解绑单个事件。

 

 = 

 解绑前，父组件都能收到子组件传来的参数，解绑后再点击参数已经传不过去了。

 

【解绑多个绑定事件】

定义2个自定义事件，一个传年龄一个传姓名。

 

 解绑多个事件就用中括号括起来。

 

 【全部解绑】

 总结：

组件的自定义事件：

1、是一种组件间通信的方式，适用于子组件==>父组件

2.、使用场景：A是父组件，B是子组件，B想给A传递数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

3、绑定自定义事件：

        （1）第一种：在父组件中：

<Student @myself="myDefine"/> 或 <Student v-on:myself="myDefine"/>

        （2）第二种：在父组件中：

    <Student ref="student"></Student>
    .....
    mounted() {
            this.$refs.student.$on('mySelf', this.myDefine)  
    },

       （3）想让自定义事件只触发一次，就用once修饰符或$once方法

4、触发自定义事件：this.$emit("myDefine",传入的数据)

5、解绑自定义事件：this.$off("myDefine")

6、组件上也可以绑定原生DOM事件，需要使用native修饰符

7、注意：通过this.$refs.xxx.$on("myDefine",回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出现问题！

                                                          

传送门：Vue中 子组件向父组件传值 及 .sync 修饰符 详解
传送门：Vue状态管理器（vuex）详解及应用场景
传送门：Vue中 $ attrs、$ listeners 详解及使用
传送门：Vue中 provide、inject 详解及使用

Vue中 常见的组件通信方式可分为三类

• 父子通信

父向子传递数据是通过 props，子向父是通过 events（$emit）；
通过父链 / 子链也可以通信（$parent / $children）；
ref 也可以访问组件实例；
provide / inject；
$attrs/$listeners；

• 兄弟通信

Bus；
Vuex；

• 跨级通信

Bus；
Vuex；
provide / inject、
$attrs / $listeners、

1. 简介

Vue 组件中常见的有：父子组件通信、兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。
今天就来说说，如果两个页面没有任何引入和被引入关系，该如何通信呢？
如果应用程序不需要类似 Vuex 这样的库来处理组件之间的数据通信，就可以考虑 Vue 中的事件总线 ，即 eventBus 来通信。

eventBus 又称为事件总线。在 Vue 中可使用 eventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的 Vuex 作为状态管理中心，将通知的概念上升到共享状态层次。

2. 使用

可以声明一个全局变量来使用事件中心，但如果在使用 webpack 之类的模块系统，这显然不合适。
每次使用都手动 import 进来也很不方便，所以本文使用 vue-bus 插件。
vue-bus npm地址
vue-bus github地址

安装及引入

npm install vue-bus --save

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装 vue-bus：

// main.js
import Vue from 'vue';
import VueBus from 'vue-bus';
Vue.use(VueBus);

在组件中使用

假设有两个Vue组件需要通信 ，在 A 组件的按钮上面绑定了点击事件发送一则消息，想通知 B 组件。

// A 组件
<template>
  <div class="wrap">
    <button @click="sendMsg">触发</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      Amsg:'我是来自A组件的信息',
    }
  },
  methods:{
    sendMsg(){
      this.$bus.emit('changeMsg', this.Amsg );
      this.$bus.emit('doOnce','我只会触发一次');
    }
  },
}
</script>

// B 组件
<template>
  <div>
    <h3>{{Bmsg}}</h3>
  </div>
</template>

<script>
export default {
  data(){
    return {
      Bmsg:'我是B组件',
    }
  },
  methods:{
    getMsg(msg){
      this.Bmsg = msg;
      console.log(msg);
    }
  },
  created(){
    /*
    * 接收事件
    * 这种写法也体现了：A 组件调用 B 组件中的方法。如果只是传递数据，可参考如下简化写法：
    * this.$bus.on('changeMsg', (msg) => { this.Bmsg = msg });
	*/ 
    this.$bus.on('changeMsg', this.getMsg);
    // 此侦听器只会触发一次
    this.$bus.once('doOnce', (txt) => { console.log(txt) });
  },
  // 组件销毁时，移除EventBus事件监听
  beforeDestroy() {
    this.$bus.off('changeMsg', this.getMsg);
  },
}
</script>

当我们点击5次触发按钮时，效果如下：

总结

eventBus 适合小项目、数据被更少组件使用的项目，对于中大型项目数据在很多组件之间使用的情况 eventBus 就不太适用了。eventBus 其实就是一个发布订阅模式，利用 Vue 的自定义事件机制，在触发的地方通过 $emit 向外发布一个事件，在需要监听的页面，通过 $on 监听事件。