Vue 组件间通信方式：自定义事件

前言

前期分享的测试开发系列！Vue 组件间通信方式汇总，总有一款适合你( 5分钟教程-附项目实战案例 )中介绍了 3 种组件间的通信方法，分别是：

• props
• 全局事件总线
• 消息订阅与发布

今天给大家分享第 4 种组件间的通信方法：自定义事件

适用于：子组件给父组件传递数据

使用方法

例如：Student.vue组件是School.vue组件的子组件, 子组件Student.vue想要将学生姓名传递给父组件School.vue

第1种方法：ref标识

School.vue组件内容如下

<template>
   <div>
       <h1>学生姓名是：{
    {
    studentName}}</h1>
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第1种写法：使用ref) -->
       <Student ref="student" @click.native="show"/>
   </div>
</template>

<script>
   import Student from "./components/Student"

   export default {
    
       name:'School',
       components:{
    Student},
       data(){
    
           return {
    
               studentName:''
           }
       },
       methods: {
    
           getStudentName(name,...params){
    
           //使用name形参接收Student组件中传递过来的实参name,...params用于接收剩余的参数
               this.studentName = name
           }
       },
       mounted() {
    
           //先在methods中准备好getStudentName方法
           this.$refs.student.$on('studentName', this.getStudentName) //绑定自定义事件,指定回调函数为getStudentName
   }
}
</script>

Student.vue组件内容如下

<template>
   <div>
       <button @click="sendStudentName">发送学生名给School组件