vue3组件传参（父子组件、兄弟组件、爷孙组件）

目录

一、父传子

1、父组件FatherView.vue

2、子组件SonView.vue

二、子传父

1、子组件SonView.vue

2、父组件FatherView.vue

三、兄弟传参

1、兄弟组件2：BrotherView.vue

2、父组件【中间件】FatherView.vue

3、兄弟组件1：SonView.vue

四、爷传孙

1、爷组件GrandFatherView.vue

2、父组件FatherView.vue

3、孙组件SonView.vue

五、孙传爷

1、爷组件

2、父组件【同上第四点，不变】

3、孙组件SonView.vue

---

一、父传子

①父组件准备参数

②父子连接点【父组件的子标签】

③子组件props接收数据

注意：在setup语法糖中，defineProps无需引入即可使用

1、父组件FatherView.vue

2、子组件SonView.vue

---

二、子传父

①子组件准备事件
注意：在setup语法糖中，defineEmits无需引入即可使用
②父子连接点【父组件的子标签】
格式：@事件='父组件自定义事件名'
③父组件使用函数，函数默认返回一个参数val，即子组件参数

1、子组件SonView.vue

2、父组件FatherView.vue

---

三、兄弟传参

1、兄弟组件2：BrotherView.vue

2、父组件【中间件】FatherView.vue

3、兄弟组件1：SonView.vue

---

四、爷传孙

①爷组件准备参数，provide()，定义好参数名

②父组件，连接爷孙组件

③孙组件inject接收参数

1、爷组件GrandFatherView.vue

2、父组件FatherView.vue

3、孙组件SonView.vue

---

五、孙传爷

①爷组件provide，写好接收孙组件参数的方法

②父组件，连接爷孙组件

③孙组件inject，对应爷组件方法

1、爷组件

2、父组件【同上第四点，不变】

3、孙组件SonView.vue