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组件</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>
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据(第2种写法：使用@或v-on) -->
       <Student v-on:studentName="getStudentName"/>
       <!-- 简写形式 -->
       <!--<Student @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的逻辑。

小结

1. 自定义事件是一种组件间通信的方式，适用于：子组件传递数据给父组件。

2. 使用场景：A是父组件，B是子组件，B想给A传数据，需要在 A 中给 B 绑定自定义事件，事件的回调在 A 中定义。

3. 绑定自定义事件：

   (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>
   

4. 子组件中触发父组件中的自定义事件： this.$emit('studentName',传递的数据)

5. 子组件中解绑自定义事件： this.$off('studentName')

6. 组件上也可以绑定原生 DOM 事件，需要使用native修饰符。

欢迎关注 无量测试之道 公众号，回复领取资源

Python+Unittest框架API自动化、

Python+Unittest框架API自动化、

Python+Pytest框架API自动化、

Python+Pandas+Pyecharts大数据分析、

Python+Selenium框架Web的UI自动化、

Python+Appium框架APP的UI自动化、

Python编程学习资源干货、

Vue前端组件化框架开发、

资源和代码 免费送啦~ 文章下方有公众号二维码，可直接微信扫一扫关注即可。

备注：我的个人公众号已正式开通，致力于IT互联网技术的分享。

包含：数据分析、大数据、机器学习、测试开发、API接口自动化、测试运维、UI自动化、性能测试、代码检测、编程技术等。

微信搜索公众号：无量测试之道，或扫描下方二维码：

添加关注，让我们一起共同成长！