威海建设集团官方网站,文化传播公司做网站宣传好吗,小公司做网站赚钱吗,管理方面的培训课程绑定自定义事件
利用自定义事件获取子组件的值
父组件给子组件绑定一个自定义事件#xff0c;实际上是绑定到了子组件的实例对象vc上#xff1a;
!-- 自定义myEvent事件 --
Student v-on:myEventgetStudentName/在父组件中编写getStudentName的实现#…绑定自定义事件
利用自定义事件获取子组件的值
父组件给子组件绑定一个自定义事件实际上是绑定到了子组件的实例对象vc上
!-- 自定义myEvent事件 --
Student v-on:myEventgetStudentName/在父组件中编写getStudentName的实现
getStudentName(name) {console.log(学生名称是${name})
}在子组件Student中利用$emit触发组件实例对象上的事件
templatediv classstudenth2学生姓名:{{name}}/h2h2学生年龄{{age}}/h2button clicksendStudentName把学生名给app/button/div
/templatescript
export default {name: Student,data() {return {name:张三,age:18}},methods: {sendStudentName() {// 触发Student组件实例身上的myEvent事件this.$emit(myEvent, this.name) // 因为事件时绑定在Student的实例对象上的所以可以直接通过this进行触发}},
}
/script自定义事件可以像普通事件一样使用简写形式:
Student myEventgetStudentName/父组件中给子组件实例对象绑定自定义事件的另一种写法
templatediv idapp classapp!-- 绑定自定义事件第二种写法在子组件上添加ref使得父组件可以获取到Student子组件的实例对象 --Student refstudent//div
/templatescript
import Student from ./components/Student
import School from ./components/Schoolexport default {name: App,components: {Student, School},methods: {getStudentName(name) {console.log(学生名称是${name})}},mounted() {// 使用this.$refs.student获取到Student组件实例对象// 使用 $on 为组件实例对象绑定自定义事件myEvent// 使用该方式会更加灵活比如在模板加载3秒后再绑定事件就可以在这里加定时器this.$refs.student.$on(myEvent, this.getStudentName)},
}
/script如果想让绑定的事件只触发一次两种写法
第一种写法
Student myEvent.oncegetStudentName/第二种写法
this.$refs.student.$once(myEvent, this.getStudentName)绑定的事件函数可以传递多个值
getStudentName(name,a,b,c) {console.log(学生名称是${name})
}触发事件时也传入多个值即可
this.$emit(myEvent, this.name, 1, 2, 3)解绑自定义事件
在子组件使用使用$off解绑自定义事件
this.$off(myEvent) // 解绑一个自定义事件解绑多个自定义事件需要传如一个数组
this.$off([myEvent, myEvent2]) // 解绑多个解绑所有自定义事件
this.$off() // 解绑所有自定义事件当组件实例被销毁时实例上的所有自定义事件全都失效。
this.$destroy();自定义事件回调函数的this
第一种情况
在methods中定义回调函数在绑定事件时填写回调函数名称。因为methods中的回调函数的this指向的是当前组件所以此处指向的是当前组件。
export default {name: App,components: { Student},data() {return {name: }}, methods: {getStudentName(name) {console.log(学生名称是${name})this.name name; // 这里的this指向的是当前组件}},mounted() {this.$refs.student.$on(myEvent, this.getStudentName) // 在methods中定义回调函数此处只写回调函数名称},
}第二种情况
直接在绑定自定义事件时定义回调函数此时回调函数体内的this指向的是触发该自定义事件的子组件。
export default {name: App,components: { Student},data() {return {name: }}, mounted() {// 直接在绑定自定义事件时定义回调函数且回调函数不是箭头函数this.$refs.student.$on(myEvent, function (name){console.log(学生名称是${name})this.name name; // 这里的this指向的是触发该事件的子组件}) },
}第三种情况
直接在绑定自定义事件时定义回调函数回调函数使用箭头函数写法。
原本此处的函数体内的this应该指向触发该自定义事件的子组件但是因为箭头函数没有this所以向外找到了mounted的this即指向了当前组件
export default {name: App,components: { Student},data() {return {name: }}, mounted() {// 直接在绑定自定义事件时定义回调函数回调函数使用箭头函数写法this.$refs.student.$on(myEvent, name {console.log(学生名称是${name})this.name name; // 这里的this指向的当前组件}) },
}组件上使用原生事件
在组件上直接使用原生事件时默认也会被当做自定义事件
!-- vue会将组件上的click也当做自定义事件 --
Student clickgetStudentName/此时vue会将Student组件上的click事件也当做自定义事件需要在Student组件中使用$emit触发才能使用。
如果要在组件上声明这个事件时一个原生事件需要使用修饰符
!-- 使用native修饰符声明这是一个原生事件 --
Student click.nativegetStudentName/先赞后看养成习惯^ _ ^ ❤️ ❤️ ❤️ 码字不易大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦
