vue3-setup语法糖 - 父子组件之间的传值

近期学习 vue3 的父子组件之间的传值，发现跟vue2的并没有太大的区别，然后发现网络上很少基于setup语法糖的教程，我这边总结一下，希望对大家有所帮助。

一、父组件向子组件传值

父组件向子组件传值的时候，子组件是通过props来接收的，然后以变量的形式将props传递到setup语法糖果中使用（defineEmits的到来！）。如下图所示：

1、父组件传递方式

3. <script setup>
4. import Child from './Child'
5. import {ref} from 'vue'
6. const parentMsg=ref('父组件传递值是a')
8. script>
10. <style scoped>
12. style>

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

3. <script setup>
4. import { toRefs, defineProps } from 'vue'
5. const props = defineProps({
6. //子组件接收父组件传递过来的值
7. info: String,
8. })
9. //使用父组件传递过来的值
10. const {info} =toRefs(props)
12. script>
14. <style>
16. style>

 3、效果图

 二、子组件向父组件传值

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

1、子组件的传递方式

3. <script setup>
4. import { defineEmits } from 'vue'
5. // 使用defineEmits创建名称，接受一个数组
6. const emit = defineEmits(['clickChild'])
7. const clickChild=()=>{
8. let param={
9. content:'b'
10. }
11. //传递给父组件
12. emit('clickChild',param)
13. }
14. script>
16. <style>
18. style>

2、父组件接收与使用

3. <script setup>
4. import Child from './Child'
5. import {ref} from 'vue'
6. const result=ref('')
7. const clickEven=(val)=>{
8. console.log(val);
9. result.value=val.content
10. }
11. script>
13. <style scoped>
15. style>

 3、效果图

三、父组件获取子组件中的属性值

当时用语法糖时，需要将组建的属性及方法通过defineExpose导出，父组件才能访问到数据，否则拿不到子组件的数据

1、子组件的传递方式

3. <script setup>
4. import { reactive, ref,defineExpose } from "vue";
5. let sex=ref('男')
6. let info=reactive({
7. like:'王者荣耀',
8. age:18
9. })
10. defineExpose({sex, info})
11. script>
13. <style>
15. style>

2、父组件显示方式

3. <script setup>
4. import Child from './Child'
5. import {ref} from 'vue'
6. const testcomRef = ref()
7. const getSonHander=()=>{
8. console.log('获取子组件中的性别', testcomRef.value.sex );
9. console.log('获取子组件中的其他信息', testcomRef.value.info )
10. }
11. script>
13. <style scoped>
15. style>

3、效果图