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

前言

前期分享的 200行纯前端Vue代码！教你写一个专属TodoList【零基础友好】

这个项目案例中使用的组件间通信方式是通过 事件绑定与props 接收来实现的，具体使用方式将在下面进行详细介绍，先说说这种方式来实现组件间的通信有什么缺点。

缺点：

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

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

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

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

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

本来 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}