_自定义事件)
自定义事件是一种组件间通信的方式适用于子组件 父组件子组件给父组件传递数据(触发事件)前提是父组件给子组件绑定了自定义事件。使用场景A是父组件B是子组件B想给A传数据那么就要在A中给B绑定自定义事件事件的回调在A中。有两种方式绑定自定义事件1、在父组件中,通过或者v-on:直接绑定。例如!-- 通过父组件[App]给子组件实例对象[StudentList2]绑定一个名为sInfo的自定义事件。 -- StudentList2 sInfo showInfo/ !-- 或者 -- StudentList2 v-on:sInfo showInfo/ methods:{ showInfo(name,sex){ this.studentName name, this.sex sex } },2、在父组件中通过给子组件创建引用标识并施加事件监听器$on的方式绑定自定义事件灵活触发。例如!-- 给子组件实例对象[StudentList3]创建引用标识 -- StudentList3 refSt03/ // 动态触发事件 mounted(){ setTimeout(() { // 为子组件Student003绑定一个名为 sInfo 的事件监听器。一旦触发该事件执行回调函数showInfo this.$refs.St03.$on(sInfo,this.showInfo) }, 3000); }触发、解绑自定义事件1、若想让自定义事件只能触发一次可以使用once事件修饰符或$once方法。// 只触发一次事件 this.$refs.St03.$once(sInfo,this.showName)2、触发自定义事件this.$emit(St03,this.name,this.sex);3、解绑自定义事件unbind() { // 解绑一个自定义事件 this.$off(sInfo); // 解绑多个自定义事件 // this.$off([sName,A,B,C]); // 解绑所有自定义事件 // this.$off(); },绑定原生DOM事件组件上也可以绑定原生DOM事件但需要使用native修饰符【否则会被当做是自定义事件】。StudentList1 click.native show/创建引用标识的方式绑定自定义事件时需要注意的事项注意通过创建引用标识的方式绑定自定义事件时注意回调函数【this.showInfo】中的this指向问题回调需要配置在父组件的methods中(此时this指向为父组件会覆盖掉子组件本来是指向子组件的)或者使用箭头函数(没有自己的this因此指向外围的父组件)。this.$refs.St03.$on(sInfo,this.showInfo)实例StudentList1.vuetemplate div classstu1 h1 通过 父组件[App] 给 子组件[StudentList1]实例对象 传递函数类型的 spanprops[属性]/span 的形式实现子给父传递数据。 /h1 h2学生姓名{{ name }}/h2 h2性别{{ sex }}/h2 button click.oncesendStudentName展示一次学生信息/button /div /template script export default { name: StudentList1, props: [sInfo], data() { return { name: 张三, sex: 男, }; }, methods: { sendStudentName() { this.sInfo(this.name,this.sex); }, }, }; /script style scoped .stu1 { background-color: darkgrey; } .stu1 h1 { background-color: chocolate; width: max-content; padding: 5px; font-family: Microsoft YaHei, sans-serif; font-size: 20px; } .stu1 h1 span { color: #ddc911; } .stu1 h2 { width: max-content; height: 20px; line-height: 20px; padding: 5px; font-size: 16px; background-color: rgb(24, 219, 219); } button { width:130px; height: 30px; margin: 10px 0px 5px 10px; color: darkgreen; font-weight: bolder; background-color: beige; border: none; border-radius: 10px; } button:hover { border: 1px darkgreen solid; } /styleStudentList2.vuetemplate div classstu2 h1 通过 父组件[App] 给 子组件[StudentList2]实例对象 绑定一个 span自定义事件/span 的形式实现子给父传递数据。 /h1 h2学生姓名{{ name }}/h2 h2性别{{ sex }}/h2 button clicksendStudentName展示学生信息/button button clickunbind解绑事件/button /div /template script export default { name: StudentList2, data() { return { name: 李四, sex: 女, }; }, methods: { sendStudentName() { // 触发student001子组件实例对象身上的sName事件。 this.$emit(sInfo,this.name,this.sex); }, unbind() { // 解绑一个自定义事件 this.$off(sInfo); // 解绑多个自定义事件 // this.$off([sName,A,B,C]); // 解绑所有自定义事件 // this.$off(); }, }, }; /script style scoped .stu2 { background-color: darkgrey; } .stu2 h1 { background-color: chocolate; width: max-content; padding: 5px; font-family: Microsoft YaHei, sans-serif; font-size: 20px; } .stu2 h1 span { color: #ddc911; } .stu2 h2 { width: max-content; height: 20px; line-height: 20px; padding: 5px; font-size: 16px; background-color: rgb(24, 219, 219); } button { width: 100px; height: 30px; margin: 10px 0px 5px 10px; color: darkgreen; font-weight: bolder; background-color: beige; border: none; border-radius: 10px; } button:hover { border: 1px darkgreen solid; } /styleStudentList3.vuetemplate div classstu3 h1 通过绑定 span$on[事件监听器]/span 的形式实现子给父传递数据。且能动态触发事件。 /h1 h2学生姓名{{ name }}/h2 h2性别{{ sex }}/h2 button clicksendStudentName3秒后...展示学生信息/button /div /template script export default { name: StudentList3, data() { return { name: 王五, sex: 男, }; }, methods: { sendStudentName() { this.$emit(sInfo,this.name,this.sex); }, }, }; /script style scoped .stu3 { background-color: darkgrey; } .stu3 h1 { background-color: chocolate; width: max-content; padding: 5px; font-family: Microsoft YaHei, sans-serif; font-size: 20px; } .stu3 h1 span{ color: #ddc911; } .stu3 h2 { width: max-content; height: 20px; line-height: 20px; padding: 5px; font-size: 16px; background-color: rgb(24, 219, 219); } button { width: 140px; height: 30px; margin: 10px 0px 5px 10px; color: darkgreen; font-weight: bolder; background-color: beige; border: none; border-radius: 10px; } button:hover { border: 1px darkgreen solid; } /styleApp.vuetemplate div classapp h1{{ msg }}/h1 h2你好啊学生姓名是span{{studentName}}/span性别是span{{ sex }}/span/h2 !-- 把【showInfo函数】赋值给 名为【sInfo】的属性 -- !-- 此时的sName属性被单向绑定数据存在StudentList1组件实例对象身上 -- !-- 通过传递函数类型的props【属性集合】形式实现子给父传递数据(用子组件的参数实现函数调用) -- StudentList1 :sInfo showInfo click.native show/ !-- 通过父组件给子组件实例对象[StudentList2]绑定一个自定义事件实现子给父传递数据 -- StudentList2 sInfo showInfo/ !-- 给子组件实例对象[StudentList3]创建引用标识 -- StudentList3 refSt03/ /div /template script import StudentList1 from ./components/StudentList1.vue; import StudentList2 from ./components/StudentList2.vue; import StudentList3 from ./components/StudentList3.vue; export default { name:App, components:{StudentList1,StudentList2,StudentList3}, data() { return { msg:组件自定义事件, studentName:, sex: } }, methods:{ showInfo(name,sex){ this.studentName name, this.sex sex }, show(){ console.log(学生信息) } }, // 动态触发事件 mounted(){ setTimeout(() { // 为子组件Student003绑定一个名为 sInfo 的事件监听器。一旦触发该事件执行回调函数showInfo this.$refs.St03.$on(sInfo,this.showInfo) // 只触发一次事件 // this.$refs.St03.$once(sInfo,this.showName) }, 3000); } } /script style h1{ font-family: KaiTi; } h2{ font-size: 26px; width:fit-content; height: 40px; padding: 10px; line-height: 40px; background-color:darkgray; } .apph2span{ display:inline-block; width:80px; color: green; } /stylemain.js// 引入Vue import Vue from vue; // 引入App import App from ./App.vue; // 关闭生产提示 Vue.config.productionTip false; // 创建vm new Vue({ el: #app, render: h h(App) }) Vue基础(34)_自定义事件
自定义事件是一种组件间通信的方式适用于子组件 父组件子组件给父组件传递数据(触发事件)前提是父组件给子组件绑定了自定义事件。使用场景A是父组件B是子组件B想给A传数据那么就要在A中给B绑定自定义事件事件的回调在A中。有两种方式绑定自定义事件1、在父组件中,通过或者v-on:直接绑定。例如!-- 通过父组件[App]给子组件实例对象[StudentList2]绑定一个名为sInfo的自定义事件。 -- StudentList2 sInfo showInfo/ !-- 或者 -- StudentList2 v-on:sInfo showInfo/ methods:{ showInfo(name,sex){ this.studentName name, this.sex sex } },2、在父组件中通过给子组件创建引用标识并施加事件监听器$on的方式绑定自定义事件灵活触发。例如!-- 给子组件实例对象[StudentList3]创建引用标识 -- StudentList3 refSt03/ // 动态触发事件 mounted(){ setTimeout(() { // 为子组件Student003绑定一个名为 sInfo 的事件监听器。一旦触发该事件执行回调函数showInfo this.$refs.St03.$on(sInfo,this.showInfo) }, 3000); }触发、解绑自定义事件1、若想让自定义事件只能触发一次可以使用once事件修饰符或$once方法。// 只触发一次事件 this.$refs.St03.$once(sInfo,this.showName)2、触发自定义事件this.$emit(St03,this.name,this.sex);3、解绑自定义事件unbind() { // 解绑一个自定义事件 this.$off(sInfo); // 解绑多个自定义事件 // this.$off([sName,A,B,C]); // 解绑所有自定义事件 // this.$off(); },绑定原生DOM事件组件上也可以绑定原生DOM事件但需要使用native修饰符【否则会被当做是自定义事件】。StudentList1 click.native show/创建引用标识的方式绑定自定义事件时需要注意的事项注意通过创建引用标识的方式绑定自定义事件时注意回调函数【this.showInfo】中的this指向问题回调需要配置在父组件的methods中(此时this指向为父组件会覆盖掉子组件本来是指向子组件的)或者使用箭头函数(没有自己的this因此指向外围的父组件)。this.$refs.St03.$on(sInfo,this.showInfo)实例StudentList1.vuetemplate div classstu1 h1 通过 父组件[App] 给 子组件[StudentList1]实例对象 传递函数类型的 spanprops[属性]/span 的形式实现子给父传递数据。 /h1 h2学生姓名{{ name }}/h2 h2性别{{ sex }}/h2 button click.oncesendStudentName展示一次学生信息/button /div /template script export default { name: StudentList1, props: [sInfo], data() { return { name: 张三, sex: 男, }; }, methods: { sendStudentName() { this.sInfo(this.name,this.sex); }, }, }; /script style scoped .stu1 { background-color: darkgrey; } .stu1 h1 { background-color: chocolate; width: max-content; padding: 5px; font-family: Microsoft YaHei, sans-serif; font-size: 20px; } .stu1 h1 span { color: #ddc911; } .stu1 h2 { width: max-content; height: 20px; line-height: 20px; padding: 5px; font-size: 16px; background-color: rgb(24, 219, 219); } button { width:130px; height: 30px; margin: 10px 0px 5px 10px; color: darkgreen; font-weight: bolder; background-color: beige; border: none; border-radius: 10px; } button:hover { border: 1px darkgreen solid; } /styleStudentList2.vuetemplate div classstu2 h1 通过 父组件[App] 给 子组件[StudentList2]实例对象 绑定一个 span自定义事件/span 的形式实现子给父传递数据。 /h1 h2学生姓名{{ name }}/h2 h2性别{{ sex }}/h2 button clicksendStudentName展示学生信息/button button clickunbind解绑事件/button /div /template script export default { name: StudentList2, data() { return { name: 李四, sex: 女, }; }, methods: { sendStudentName() { // 触发student001子组件实例对象身上的sName事件。 this.$emit(sInfo,this.name,this.sex); }, unbind() { // 解绑一个自定义事件 this.$off(sInfo); // 解绑多个自定义事件 // this.$off([sName,A,B,C]); // 解绑所有自定义事件 // this.$off(); }, }, }; /script style scoped .stu2 { background-color: darkgrey; } .stu2 h1 { background-color: chocolate; width: max-content; padding: 5px; font-family: Microsoft YaHei, sans-serif; font-size: 20px; } .stu2 h1 span { color: #ddc911; } .stu2 h2 { width: max-content; height: 20px; line-height: 20px; padding: 5px; font-size: 16px; background-color: rgb(24, 219, 219); } button { width: 100px; height: 30px; margin: 10px 0px 5px 10px; color: darkgreen; font-weight: bolder; background-color: beige; border: none; border-radius: 10px; } button:hover { border: 1px darkgreen solid; } /styleStudentList3.vuetemplate div classstu3 h1 通过绑定 span$on[事件监听器]/span 的形式实现子给父传递数据。且能动态触发事件。 /h1 h2学生姓名{{ name }}/h2 h2性别{{ sex }}/h2 button clicksendStudentName3秒后...展示学生信息/button /div /template script export default { name: StudentList3, data() { return { name: 王五, sex: 男, }; }, methods: { sendStudentName() { this.$emit(sInfo,this.name,this.sex); }, }, }; /script style scoped .stu3 { background-color: darkgrey; } .stu3 h1 { background-color: chocolate; width: max-content; padding: 5px; font-family: Microsoft YaHei, sans-serif; font-size: 20px; } .stu3 h1 span{ color: #ddc911; } .stu3 h2 { width: max-content; height: 20px; line-height: 20px; padding: 5px; font-size: 16px; background-color: rgb(24, 219, 219); } button { width: 140px; height: 30px; margin: 10px 0px 5px 10px; color: darkgreen; font-weight: bolder; background-color: beige; border: none; border-radius: 10px; } button:hover { border: 1px darkgreen solid; } /styleApp.vuetemplate div classapp h1{{ msg }}/h1 h2你好啊学生姓名是span{{studentName}}/span性别是span{{ sex }}/span/h2 !-- 把【showInfo函数】赋值给 名为【sInfo】的属性 -- !-- 此时的sName属性被单向绑定数据存在StudentList1组件实例对象身上 -- !-- 通过传递函数类型的props【属性集合】形式实现子给父传递数据(用子组件的参数实现函数调用) -- StudentList1 :sInfo showInfo click.native show/ !-- 通过父组件给子组件实例对象[StudentList2]绑定一个自定义事件实现子给父传递数据 -- StudentList2 sInfo showInfo/ !-- 给子组件实例对象[StudentList3]创建引用标识 -- StudentList3 refSt03/ /div /template script import StudentList1 from ./components/StudentList1.vue; import StudentList2 from ./components/StudentList2.vue; import StudentList3 from ./components/StudentList3.vue; export default { name:App, components:{StudentList1,StudentList2,StudentList3}, data() { return { msg:组件自定义事件, studentName:, sex: } }, methods:{ showInfo(name,sex){ this.studentName name, this.sex sex }, show(){ console.log(学生信息) } }, // 动态触发事件 mounted(){ setTimeout(() { // 为子组件Student003绑定一个名为 sInfo 的事件监听器。一旦触发该事件执行回调函数showInfo this.$refs.St03.$on(sInfo,this.showInfo) // 只触发一次事件 // this.$refs.St03.$once(sInfo,this.showName) }, 3000); } } /script style h1{ font-family: KaiTi; } h2{ font-size: 26px; width:fit-content; height: 40px; padding: 10px; line-height: 40px; background-color:darkgray; } .apph2span{ display:inline-block; width:80px; color: green; } /stylemain.js// 引入Vue import Vue from vue; // 引入App import App from ./App.vue; // 关闭生产提示 Vue.config.productionTip false; // 创建vm new Vue({ el: #app, render: h h(App) })