Vue3 组件通信方式【最好用的都在这里了】

目录

一、props方式

二、emit方式

三、v-model方式

---

一、props方式

props方式是Vue中 父传子 最常见的一种方式了，demo如下：

父组件中定义了一个 clearAll 的方法，子组件通过props接收，直接在 button 组件中使用。

二、emit方式

emit方式是Vue中 子传父 最常见的一种方式了，demo如下：

子组件向父组件发射一个 clear 事件，父组件通过 @clear 来接收。

三、v-model方式

本文的重点来了！v-mode是Vue中的一个语法糖，它的用法有很多，主要作用是双向绑定，在这里我们重点来介绍它在组件通信中的应用，demo如下：

父组件通过 v-model 相当于向子组件传递了一个 todos prop 并接收 update:todos 事件，父组件会响应式的更新 todos 数组。