【Vue3】3-3 : 组件之间是如何进行互相通信的

本书目录：点击进入

一、组件之间为什么要做通信

二、组件之间通信方式

2.1、父传子：由传递属性实现

stage 1：申明 （即定义）

stage 2：注册

stage 3：使用

【示例】：父组件将 title 和 count 传递给子组件 （普通数据 和 响应式数据的传递）

＞  代码 

＞  效果

2.2、子传父：由自定义事件实现 

stage 1：申明 （即 父组件：定义方法 + 子组件：调用方法）

stage 2：注册

stage 3：使用

 【示例】：子组件将 data 传递给父组件 

＞  代码 

＞  效果

---

一、组件之间为什么要做通信

• 主要是为了让组件满足不同的需求

如：

• 评分组件显示：由5颗星变成10颗星
• 按钮组件显示：红色删除，比较危险

二、组件之间通信方式

vue中有4-5种，本节介绍最常见的 

• 父子通信

2.1、父传子：由传递属性实现

stage 1：申明 （即定义）

stage 2：注册

stage 3：使用

【示例】：父组件将 title 和 count 传递给子组件 （普通数据 和 响应式数据的传递）

• 普通数据：title="hello world" ，无法响应式修改数据

• 响应式数据 :count="count"

＞  代码 

＞  效果

2.2、子传父：由自定义事件实现 

stage 1：申明 （即 父组件：定义方法 + 子组件：调用方法）

stage 2：注册

stage 3：使用

 【示例】：子组件将 data 传递给父组件 

＞  代码 

    
{{message}}
    
  
  

＞  效果