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

原创

无量测试之道 2022-10-19 14:15:00 ©著作权

文章标签 自定义事件传递数据 python 文章分类 Spark 大数据

©著作权归作者所有：来自51CTO博客作者无量测试之道的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

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

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

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

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

使用方法

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

第1种方法：ref标识

School.vue组件内容如下

<template> <div> <h1>学生姓名是：{{studentName}}</h1>  <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组件</button> </div> </template> <script> export default { name:'Student', data() { return { name: '刘浩' } }, methods: { sendStudentName(){ //触发School组件实例身上的studentName事件,把学生名给School组件,再传递2个额外的参数：666,777 this.$emit('studentName', this.name, 666, 777) } } } </script>

第2种方法：v-on或@

School.vue组件内容如下

<template> <div> <h1>学生姓名是：{{studentName}}</h1>  <Student v-on:studentName="getStudentName"/>   </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 } } } </script>

Student.vue组件内容如下

<template> <div> <button @click="sendStudentName">发送学生名给School组件</button> </div> </template> <script> export default { name:'Student', data() { return { name: '刘浩' } }, methods: { sendStudentName(){ //触发School组件实例身上的studentName事件,把学生名给School组件,再传递2个额外的参数：666,777 this.$emit('studentName', this.name, 666, 777) } } } </script>

项目实战

在 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】
项目实战案例中，使用的props组件间通信方式，这种通信方式有一些不足之处。

在测试开发系列！Vue 组件间通信方式汇总，总有一款适合你( 5分钟教程-附项目实战案例 )一文中有详细描述该种通信方式的不足之处，同时也介绍了其他 2 种组件间通信方式，不妨点开链接重新温习一下。

今天介绍的自定义事件的组件间通信方式的 2 种写法，可以很好的替换 todoList案例中所使用的通信方式。

父组件：App.vue组件内容如下

<template> <div> <ListFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/> </div> </template> <script> import ListFooter from "./components/ListFooter" export default { name:'App', components:{ListFooter}, data(){ return { //由于todos是ListHeader组件和ListFooter组件都在使用，所以放在App中（状态提升） todos:JSON.parse(localStorage.getItem('todos')) || [] } }, methods: { //清除所有已经完成的todo clearAllTodo(){ this.todos = this.todos.filter((todo)=>{ return !todo.done }) } } } </script>

这里的App.vue组件就是父组件，ListFooter.vue组件是子组件，以clearAllTodo自定义事件为例。

使用的是第2种方法：v-on的简写形式@clearAllTodo="clearAllTodo",@后的clearAllTodo是自定义事件名称。

子组件ListFooter.vue在传递数据时只需要触发这个事件名称就可以传递数据给父组件App.vue，=后的clearAllTodo是methods 回调函数的名称。

子组件：ListFooter.vue组件内容如下

<template> <div> <button @click="clearAll">清除已完成任务</button> </div> </template> <script> export default { name:'ListFooter', methods:{ clearAll(){ this.$emit('clearAllTodo') //使用自定义事件clearAllTodo实现---App组件中给绑定的自定义事件 } } } </script>

在子组件ListFooter.vue中使用$emit来触发父组件App.vue中自定义事件clearAllTodo的逻辑。

小结

自定义事件是一种组件间通信的方式，适用于：子组件传递数据给父组件。
使用场景：A是父组件，B是子组件，B想给A传数据，需要在 A 中给 B 绑定自定义事件，事件的回调在 A 中定义。
绑定自定义事件：
(1).第 1 种方式，在父组件App.vue中:

<template>
  <div>
    <Student @studentName="sendStudentName"/> 
    <!--或者使用以下非简写方式-->
    <Student v-on:studentName="sendStudentName"/>
  </div>
</template>

(2).第 2 种方式，在父组件App.vue中:

<template>
  <div>
    <Student ref="student"/>
  </div>
</template>

<script>
    import ListFooter from "./components/ListFooter"
    
    export default {
        name:'App',
        components:{ListFooter},
        data(){
            return {
                studentName:'刘浩'
            }
        },
        methods: {
          getStudentName(name,...params){
             this.studentName = name
          }
        },
        mounted(){
            this.$refs.student.$on('studentName',this.getStudentName)//提前准备好getStudentName回调方法
        }    
  }
</script>