vue3 - 父子组件之间的传值 2022-03-01

近期学习 vue3 的父子组件之间的传值，发现跟 vue2.x的父子组件之间的传值 并没有太大的区别，我这边总结一下，希望对大家有所帮助。

一、父组件向子组件传值
  父组件向子组件传值的时候，子组件是通过props来接收的，如果在子组件中要放到setup函数中使用的话，就要先通过props接收到传递过来的参数，然后以变量的形式将props传递到setup函数中使用。如下图所示：

1、父组件传递方式

1.png

2、子组件接收方式和使用

2.png

3、效果图

3.png

二、子组件向父组件传值
  vue3中子组件向父组件传递值和vue2.x的区别是vue2.x使用的是 emit('方法名','传递的值(根据需要传或者不传)')，vue3的是 emit('方法名','传递的值(根据需要传或者不传)')。vue3的子传父方式如下图所示：

1、子组件的传递方式

4.png

2、父组件接收与使用

5.png

3、效果图

6.png

————————————————
版权声明：本文为CSDN博主「紫菀檀ss」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/LiaoFengJi/article/details/120013255