【Vue2.0学习】—组件的自定义事件（五十八）
组件的自定义事件
- 一种组件间通信的方式：适用于子组件—>父组件
- 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要A给B绑定自定义事件，事件的回调在A中
绑定自定义事件：
- 第一种方式：在父组件中
<Demo @stu="test"/>或<Demo v-on:stu="test"/>
第二种方式：在父组件中：
<Demo ref="demo"/> …… mounted(){ this.$refs.XXX.$on('stu',this.test) }
- 若想让自定义事件只触发一次，可以使用once修饰符或$once方法
触发自定义事件：this.$emit('stu',数据)
解绑自定义事件：this.$off('stu')
- 组件上也可以绑定原生
DOM事件，需要使用native修饰符
注意：通过this.$refs.XXX.$on('native',回调) 绑定自定义事件时，回调要么配置在methods中，要么用箭头函数否则this指向会出问题
<template> <div class="container"> <h1>{{msg}}</h1> <School :getSchoolName="getSchoolName" /> <!-- 意思是说：给Student组件的实例对象vc身上绑定了一个事件,事件名字叫stu,有人触发了这个事件demo函数就会调用--> <!-- <Student v-on:stu="demo"/> --> <!-- 通过父组件给子组件绑定一个自定义事件实现：子传父传递数据(使用@或者v-on) --> <!-- <Student v-on:stu="getName"/> --> <Student @stu="getName"/> <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据使用ref --> <!-- <Student ref="student"/> --> <!-- <Student @:stu="getName" @demo="m1" /> --> </div> </template> <script> import Student from './components/Student.vue' import School from './components/School.vue' export default { name: 'App', data() { return { msg: '你好鸭' } }, components: { School, Student }, methods: { getSchoolName(name) { console.log('APP收到名字了', name) }, getName(name) { console.log('APP收到学生名字了', name) } // m1() { // console.log('demo事件触发了') // } }, mounted() { // this.$refs.student.$on('stu',this.getName) //触发一次 // this.$refs.student.$once('stu',this.getName) } } </script> <style scoped> .container { background-color: pink; padding: 5px; } </style>
<template> <div class="box"> <h2>学生姓名：{{name}}</h2> <h2>学生年龄：{{age}}</h2> <button @click="sendStudentName">把学生名给APP</button> <button @click="unbind">解绑学生事件</button> </div> </template> <script> export default { name:'Student', data(){ return{ name:'王同学', age:20 } }, methods:{ sendStudentName(){ //触发Student身上的stu 事件 this.$emit('stu',this.name) // this.$emit('demo') }, unbind(){ //用于解绑一个事件 this.$off('stu');//解绑一个事件 //this.$off(['stu','demo'])//解绑多个事件 // this.$off()//解绑所有的事件 } } } </script> <style scoped> .box{ background-color: skyblue; } </style>
