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,777this.$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,777this.$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: {//清除所有已经完成的todoclearAllTodo(){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>

子组件中触发父组件中的自定义事件：
this.$emit('studentName',传递的数据)
子组件中解绑自定义事件：
this.$off('studentName')
组件上也可以绑定原生 DOM 事件，需要使用native修饰符。

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

Python+Unittest框架API自动化、

Python+Pytest框架API自动化、

Python+Pandas+Pyecharts大数据分析、

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

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

Python编程学习资源干货、

Vue前端组件化框架开发、

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

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

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

微信搜索公众号：无量测试之道

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