vue3 组件间通信的方式(setup语法糖写法)

vue3 组件间通信的方式(setup语法糖写法)

1. Props方式

该方式用于父传子，父组件以数据绑定的形式声明要传递的数据，子组件通过defineProps()方法创建props对象，即可拿到父组件传来的数据。

// 父组件

// 子组件

2. emit方式

emit方式也是Vue中最常见的组件通信方式，该方式用于子传父。

// 父组件

// 子组件

3、defineExpose

利用defineExpose+ref 可以得到组件里的方法和变量

// 父组件

// 子组件

4. provide/inject 

provide/inject是 Vue 中提供的一对 API。无论层级多深，API 都可以实现父组件到子孙组件的数据传递。

// 父组件

// 子组件

5、attrs

attrs可以接受除去 props、style、 class之外的属性。

// 父组件

// 子组件

6. v-model方式

v-model不能严格成为数据的传递方式，其实只是减少了代码量。

// 父组件

子组件需要emit一个叫update:xxx的事件，再把需要更新的响应式数据传给emit方法的第二个参数即可。

// 子组件

7. Vuex / Pinia

Vuex 和 Pinia 是 Vue 3 中的状态管理工具，使用这两个工具可以轻松实现组件通信，具体的使用方法可以查阅官方文档。

Vuex官方文档

Pinia官方文档