vue3 - 父子组件之间的传值

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

一、父组件向子组件传值

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

1、父组件传递方式

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

3、效果图

二、子组件向父组件传值

  vue3中子组件向父组件传递值和vue2.x的区别是vue2.x使用的是 $emit 而vue3使用的是emit，它们的传值一样都是方法加值，即vue2.x的是this.$emit('方法名','传递的值(根据需要传或者不传)')，vue3的是 emit('方法名','传递的值(根据需要传或者不传)')。vue3的子传父方式如下图所示：

1、子组件的传递方式

2、父组件接收与使用

3、效果图