什么是自定义事件？
复习浏览器事件
该章节主要为Vue组件—自定义事件的学习，对浏览器原生事件仅作简短复习说明
定义
-
理解为一种 信号 ，当浏览器捕获到该信号时执行特定的 处理程序；
这种处理程序也就是 事件的回调函数。
-
当用户进行某些行为操作时，运行某 JS代码的的方式。
分类
- 鼠标事件
- 键盘事件
- 表单事件
- …
定义事件处理程序的几种方式
HTML 特性
<input value="Click me" onclick="alert('点我呀!')" type="button">
DOM 属性
<input type="button" onclick="countRabbits()" value="Count rabbits!">
<script>
function countRabbits() {
for(let i=1; i<=3; i++) {
alert("Rabbit number " + i);
}
}
</script>
回调函数中 this
- this指向触发该事件的元素
setAttribute定义事件产生的问题
// 点击 <body> 将产生 error，
// 因为特性总是字符串的，函数变成了一个字符串
document.body.setAttribute('onclick', function() { alert(1) });
Vue自定义事件
自定事件的特点
- 事件名自定义
- 触发事件的时机自定义
绑定自定义事件的方式
组件标签绑定
<School>
:getStudents="getStudents"
@getTeacherAmount="getTeacherAmount"
</School>
$ref绑定
<Student :students="students" ref="student"></Student>
....
mounted() {
// 为组件绑定自定义事件,
this.$refs.student.$on("showbubu", this.showbubu);
},
比较标签绑定 $ref绑定
- 通过$ref可以实现动态绑定
自定义事件能做什么？
- 子组件向父组件传递信息
如何使用自定义事件？
接收信息的组件
- 定义事件的回调函数
- 回调函数的参数 为传递信息
发布信息的组件
-
触发事件
<ul v-for="student in students" :key="student.id"> <li> <div>姓名:{{ student.name }}</div> <button @click="confirmInfo(student.name)">找到布布</button> </li> </ul> methods: { confirmInfo(name) { //触发事件 this.$emit('showbubu',name)// name: 传递的信息 },
使用自定义事件注意事项
解绑自定义事件
this.$off('showbubu')//解绑单个事件
this.$off(['event1','event2'])//解绑多个
this.$off()//解绑所有事件
一些tips
- 使用chrome中 vue开发者工具 更清晰查看自定义事件操作
