Vue 组件间通信方式汇总，总有一款适合你( 附项目实战案例 )-CFANZ编程社区

前言

前期分享的 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】
这个项目案例中使用的组件间通信方式是通过 事件绑定与props 接收来实现的，具体使用方式将在下面进行详细介绍，先说说这种方式来实现组件间的通信有什么缺点。

缺点：

Vue 组件间通信方式汇总，总有一款适合你( 附项目实战案例 )_绑定事件

以 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】
项目案例中的最外层组件 App.vue 的这段代码里的:checkTodo事件来看。

因为 App.vue 组件的子组件 ListItem.vue 需要调用 App.vue 组件里封装好的checkTodo方法，所以使用:checkTodo进行事件绑定到子组件 AllList.vue 中。

然后再在 AllList.vue 组件中以同样的方式给其子组件 ListItem.vue 绑定事件进行传递，最终都使用props进行绑定事件的接收，接收成功后才可在本组件中进行使用。

三个组件之间的关系如下图。

Vue 组件间通信方式汇总，总有一款适合你( 附项目实战案例 )_数据_02

这种通信方式很明显的问题在于，传递过程太过冗长，麻烦了不该麻烦的人。

本来 AllList.vue 组件不需要使用checkTodo方法，但因为其子组件 ListItem.vue 要使用，所以不得不先接收由 App.vue 传递过来事件后再传递给其子组件 ListItem.vue，此时充当了中间人的角色，相当于为父亲和儿子来传递消息，且这个消息对自己并没有任何价值。

如果不选择这种通信方式，是否还有其他通信方式可以选择呢？

答案是：有的。而且你的选择可不只一种！

组件间通信方式

::: block-1

1. props

(1). 使用方法

需求背景

以上图中三个组件之间的关系为例，作为 AllList.vue 子组件的 ListItem.vue 组件想要获取 App.vue 组件的信息

使用步骤

Step1: 在 App.vue 组件中引入 AllList.vue 组件，在用该组件标签时，使用:checkTodo给其绑定事件。

Step2: 回到 AllList.vue 组件中，使用props来接收checkTodo，在用子组件 ListItem.vue 标签时，再使用:checkTodo给其绑定事件。

Step3: 回到 ListItem.vue 组件中，使用props来接收checkTodo，接收后就可以在组件内部使用了。

(2). 实战代码案例

App.vue 组件核心内容

<template> <div class="todo-wrap"> <AllList :todos="todos":checkTodo="checkTodo"/> </div> </template> <script> //引入子组件 import AllList from "./components/AllList" export default { //给当前组件命名为:App name:'App', //注册引入的子组件 components:{AllList}, //初始化的todo list数据 data(){ return { todos:[ {id:'001', title:'读文学书', done:true}, {id:'002', title:'解函数', done:false}, {id:'003', title:'上瑜珈课', done:false}, {id:'004', title:'研究三角函数', done:false}, ] } } } </script>

AllList.vue 组件核心内容

ListItem.vue 组件核心内容

<template> <li> <label>  <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/> <span>{{todo.title}}</span> </label> </li> </template> <script> export default{ //给当前组件命名为: ListItem name:'ListItem', //使用props声明接收父组件AllList里checkTodo props:['checkTodo'], methods: { //勾选or取消勾选 handleCheck(id) { //通知App组件将对应的todo对象的done值取反 this.checkTodo(id) } } } </script>

:::

::: block-1

2. 全局事件总线

(1). 使用方法

需求背景

A 组件想要接收 B 组件传递的数据

使用步骤

Step1: 在入口 main.js 文件中安装全局事件总线。

安装位置为：在创建 vue 实例对象时传入的配置项里调用 beforeCreate钩子函数配置。

Step2: B 组件在 mounted 函数中使用 this.$bus.$on('deleteTodo',callback)进行事件绑定，事件名称为：deleteTodo。

Step3: A 组件中使用this.$bus.$emit('deleteTodo',id)进行全局事件总线的触发，这里触发的事件名与 B 组件绑定的事件名一致。

(2). 实战代码案例

背景

上面的 todoList 项目案例中，不想使用 AllList.vue 组件作为中间人来传递消息，想直接使用全局事件总线的方式来实现 App.vue 与 ListItem.vue 的通信。

在 main.js 入口文件中安装全局事件总线

main.js 文件内容

//引入Vue import Vue from 'vue' //引入App import App from './App.vue' //关闭Vue的生产提示 Vue.config.productionTip = false //创建vm new Vue({ el:'#app', render: h => h(App), beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线 } })

App.vue 组件核心内容

mounted() { // 绑定全局事件总线，事件名称：delteTodo this.$bus.$on('deleteTodo',this.deleteTodo) }, beforeDestroy() { // 销毁事件名称为：deleteTodo 的全局事件总线 this.$bus.off('deleteTodo') }

ListItem.vue 组件核心内容

methods: { //删除 handleDelete(id){ if(confirm('确认删除吗？')){ //通过$emit来触发App.vue组件绑定的全局事件总线，事件名称：deleteTodo，来通知App组件将对应的todo对象删除掉 this.$bus.$emit('deleteTodo',id) } } }

:::

::: block-1