Vue笔记 - 自定义事件与事件总线

自定义事件与事件总线

自定义事件与事件总线
1. 事件
2. 自定义事件
3. 全局事件总线

1. 事件

1.1 基本使用

使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，都是被Vue所管理的函数，this指向的是vm或组件实例对象

@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传递额外参数

<div id="root">
<button @click="showInfo1">点击获取提示信息1</button>
<button @click="showInfo2(66,"hi",$event)">点击获取提示信息2</button>
</div>

<script>
	const vm = new Vue({
        el:'#root',
        data:{
            name:"Jack"
        },
        method:{
            showInfo(event){
                alert('hi')
            },
            showInfo2(String,number,event){
                alert(String)
            }
        }
    })
</script>

1.2 事件修饰符

prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素才触发事件

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

<div id="root">
    <div class="demo1" @click="showInfo">
        <!--原来点击超链接会在提示信息后跳转，现在不会跳转-->
        <a href="https://www.baidu.com/" @click.prevent="showInfo">点击提示信息</a>
        <!--原来点击后，由于冒泡会提示两次，现在只会提示一次-->
    	<button @click.stop="showInfo">点击提示信息</button>
        <!--事件只触发一次-->
        <button @click.once="showInfo">点我提示信息</button>
        
        <!--链式修饰-->
        <button @click.once.prevent.stop="showInfo">点我提示信息</button>
    </div>
</div>

1.3 键盘事件

Vue中常用的按键别名：

回车 Enter 删除 delete 退出 Esc 空格 Space 换行 tab

上 up 下 down 左 left 右 right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但是注意要转为kebab-case（短横线命名）
- 比如CAPS LOCKS键，就要书写为caps-locks
系统修饰键

系统修饰键包含：ctrl、alt、shift、meta，它们的使用方法比较特殊
- 配合keyup使用：按下修饰键的同时，再按下其它键，随后释放其它键，事件才会被触发
- 配合keydown使用：正常触发事件

回车	Enter	删除	delete	退出	Esc	空格	Space	换行	tab
上	up	下	down	左	left	右	right

Vue.config.keyCodes.自定义键名 = 键码 可以去定制按键别名

<div id="root">
    <!--按下回车键执行showInfo1方法-->
    <input type="text" @keydown.enter="showInfo1">
    <!--同时按下ctrl键和y键执行showInfo2方法-->
    <input type="text" @keyup.ctrl.y="showInfo2">
</div>

2. 自定义事件

自定义事件是一种组件间通信的方式，适用于子组件传递数据给父组件

如果子组件想给父组件传数据，那么就要在父组件中给子组件绑定自定义组件
基本流程：子组件 → 子组件想传递数据给子组件 → 父组件绑定监听方法给子组件 → 子组件接收并调用监听方法，同时传参 → 父组件接收到参数，使用参数与监听方法 → 父组件
绑定自定义事件
- 方法一：在父组件中<Demo @事件名="方法名"/>
```

<Student v-on:EventName="demo"/>

<Student @EventName="demo"/>
```
- 方法二：在父组件中this.$refs.demo.$on('事件名',回调函数)
```
<Student ref="student"/>

.....

<script>
....
mounted(){
    /*this.$refs.student是为了为了获取到student的组件实例
    $on是为了绑定,EventName是之后子组件中需要调用的事件名
    this.getStudentName是父组件中(希望子组件调用的)用于监听的方法名*/
    this.$refs.student.$on('EventName',this.getStudentName)
}
</script>
```
- 注意事项：
  - 通过this.$refs.xxx.$on('事件名',回调函数)绑定自定义事件时，回调函数要么配置在methods中，要么使用箭头函数，否则this指向会出问题
  - 自定义事件依旧适用事件修饰符，如<Student @EventName.once="demo"/>
  - 如果尝试在组件上绑定原生事件会产生冲突，如<Student @click="demo"/>，这样被会识别为自定义事件而无法触发click本来的效果。如果要恢复click的效果，需要使用.native，<Student @click.native="demo"/>
  - 通过组件名直接绑定与通过$on没什么区别，不过$on也可以在子组件中自己调用，这样就可以自己监听自己的函数了
触发自定义事件： this.$emit('事件名',数据)
- 当确定父组件已经正常绑定事件到子组件后，子组件就可以通过$emit在任意地方调用父组件的方法
- 调用后该事件会被父组件监听到，调用时可以传递参数
```
<button @click="sendStudentName">传递学生名给父组件</button>

<script>
//...
methods:{
    sendStudentName(){
        this.$emit('atguigu',this.name)
    }
}
</script>
```

解绑自定义事件： this.$off('事件名')

//解绑在子组件中进行
this.$off('EventName')	//解绑单个事件
this.$off(['EventName1','EventName2'])	//解绑多个事件
this.$off()	//解绑所有事件

注意：所有绑定的自定义事件在组件销毁时都会自动解绑

3. 全局事件总线

全局事件总线是一种可以在任意组件间通信的方式，本质上是一个对象

它满足以下要求：
1. 所有的组件对象都必须能看见它
2. 这个对象必须能够绑定，触发和解绑事件
全局事件总线的原理与Vuex的原理有异曲同工之妙，Vuex的做法是抽离出一个js文件作为共用空间，而事件总线相对隐蔽一些——将Vue实例(vm)的原型对象上安装一个$bus作为公用空间。只要其它组件有需要，就可以用$on往$bus上绑事件，然后需要回传参数的组件再用$emit传递即可

安装全局事件总线

new Vue({
    //...
    beforeCreate(){
        Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
    },
    //...
})

使用事件总线
- 接收数据：若A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
```
methods(){
    demo(data){...}
}
//...
mounted(){
    this.$bus.$on('xxxx',this.demo)
}
```
- 提供数据
```
this.$bus.$emit('xxx',load)
```

标签：Vue,自定义,绑定,总线,事件,组件
From： https://www.cnblogs.com/Solitary-Rhyme/p/16919697.html