前言
系列文章目录：
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
自定义事件
自定义事件是一种组件间通信的方式，适用于：子组件 ===> 父组件
使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
1. 自定义属性实现子组件向父组件传递数据
App.vue
<template> <div class="app"> <h1>{{msg}}</h1> <School :getSchoolName="getSchoolName"></School> <Student></Student> </div> </template> <script> //导入子组件 import Student from './components/Student' import School from './components/School' export default { name: 'App', components: { School, Student }, data() { return { msg: '你好啊！' } }, methods: { getSchoolName(name) { console.log('App收到了学校名：', name) } } } </script> <style scoped> .app { background-color: gray; padding: 5px; } </style>
School.vue
<template> <div class="school"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="sendSchoolName">把学校名给App</button> </div> </template> <script> export default { name:'School', props:['getSchoolName'], data() { return { name:'SGG', address:'Beijing', } }, methods: { sendSchoolName(){ // 调用父组件传递过来的方法 // 将数据传递给父组件 this.getSchoolName(this.name) } }, } </script> <style scoped> .school{ background-color: skyblue; padding: 5px; } </style>
Student.vue
<template> <div class="student"> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> </div> </template> <script> export default { name:'Student', data() { return { name:'张三', sex:'男' } }, } </script> <style scoped> .student{ background-color: pink; padding: 5px; margin-top: 30px; } </style>
2. 自定义事件实现子组件向父组件传递数据
2.1 进行自定义事件的绑定
为子组件绑定自定义事件，在父组件中：
<子组件名 @自定义事件名="事件的处理函数"></子组件名>
或
<子组件名 v-on:自定义事件名="事件的处理函数"></子组件名>
App.vue
<template> <div class="app"> <h1>{{msg}}</h1> <School :getSchoolName="getSchoolName"></School> <!-- 1. 为子组件绑定自定义事件 MyEvent 当自定义事件 MyEvent 被触发时， 会调用事件的处理函数 getStudentName --> <Student @MyEvent="getStudentName"></Student> </div> </template> <script> //导入子组件 import Student from './components/Student' import School from './components/School' export default { name: 'App', components: { School, Student }, data() { return { msg: '你好啊！' } }, methods: { getSchoolName(name) { console.log('App收到了学校名：', name) }, getStudentName(name) { console.log('App收到了学生名：', name) } } } </script> <style scoped> .app { background-color: gray; padding: 5px; } </style>
2.2 触发自定义事件
进行自定义事件的触发，需要在被绑定自定义事件的子组件中进行触发。给谁绑定，谁触发。
子组件被绑定的自定义事件，自定义事件会挂载在对应子组件实例对象的
$emit属性上。
触发自定义事件：
this.$emit('自定义事件名', 向事件处理函数传递的参数)
Student.vue
<template> <div class="student"> <h2>学生姓名：{{name}}</h2> <h2>学生性别：{{sex}}</h2> <button @click="sendStudentName">把学生姓名给App</button> </div> </template> <script> export default { name:'Student', data() { return { name:'张三', sex:'男' } }, methods: { sendStudentName() { // 触发自定义事件 // 将学生姓名传递给自定义事件的处理函数 this.$emit('MyEvent', this.name) } }, } </script> <style scoped> .student{ background-color: pink; padding: 5px; margin-top: 30px; } </style>
2.3 使用 ref 绑定自定义事件
使用 ref 为子组件绑定自定义事件，需要在mounted()中进行，因为此时组件的真实DOM才被渲染到页面上完成。
2.3.1 语法
使用 ref 绑定自定义事件，在父组件中：
<子组件名 @自定义事件名="事件的处理函数"></子组件名>
mounted(){ // 先通过 $refs 获取对应的子组件 // 然后使用 $on 为该子组件绑定自定义事件 this.$refs.子组件名.$on('自定义事件名', 事件的处理函数) }
2.3.2 自定义事件的绑定
App.vue
<template> <div class="app"> <h1>{{msg}}</h1> <School :getSchoolName="getSchoolName"></School> <!-- 1. 为子组件绑定自定义事件 MyEvent 当自定义事件 MyEvent 被触发时， 会调用事件的处理函数 getStudentName --> <!-- <Student @MyEvent="getStudentName"></Student> --> <!-- 2. 使用 ref 进行自定义事件的绑定 --> <Student ref="student"></Student> </div> </template> <script> //导入子组件 import Student from './components/Student' import School from './components/School' export default { name: 'App', components: { School, Student }, data() { return { msg: '你好啊！' } }, methods: { getSchoolName(name) { console.log('App收到了学校名：', name) }, getStudentName(name) { console.log('App收到了学生名：', name) } }, mounted() { // 为子组件 Student 绑定自定义事件 this.$refs.student.$on('MyEvent', this.getStudentName) }, } </script> <style scoped> .app { background-color: gray; padding: 5px; } </style>
2.3.3 使用 ref 绑定自定义事件的好处
使用 ref 绑定自定义事件的好处，能够更好的处理自定义事件的绑定，能对自定义事件的绑定有更加灵活的控制。
使用 v-on 进行自定义事件的绑定，在页面渲染解析完成，vue就会为其绑定自定义指令，而使用 ref 绑定自定义事件，可以对其绑定的时间进行控制，如：延时、等待请求完成等。
App.vue
<template> <div class="app"> <h1>{{msg}}</h1> <School :getSchoolName="getSchoolName"></School> <!-- 1. 为子组件绑定自定义事件 MyEvent 当自定义事件 MyEvent 被触发时， 会调用事件的处理函数 getStudentName --> <!-- <Student @MyEvent="getStudentName"></Student> --> <!-- 2. 使用 ref 进行自定义事件的绑定 --> <Student ref="student"></Student> </div> </template> <script> //导入子组件 import Student from './components/Student' import School from './components/School' export default { name: 'App', components: { School, Student }, data() { return { msg: '你好啊！' } }, methods: { getSchoolName(name) { console.log('App收到了学校名：', name) }, getStudentName(name) { console.log('App收到了学生名：', name) } }, mounted() { // 等待三秒，为子组件 Student 绑定自定义事件 setTimeout(()=>{ this.$refs.student.$on('MyEvent', this.getStudentName) }, 3000) }, } </script> <style scoped> .app { background-color: gray; padding: 5px; } </style>
