vue3中setup语法糖—几种数据通信方式

1、defineProps

子组件获取父组件中的数据也就是父组件传值给子组件（若想要在setup中使用defineProps定义的值需要const这个值才能使用）

 

在父组件A中调用子组件B，组件A在script setup中const一个变量posts，然后在放置组件B的地方<B :posts="posts" />，这样在B组件的script setup定义defineProps，定义的就是刚刚组件A中传过来的值posts，可以在里面写定义的类型与default值即初始值。

 其中getposts()是一个js文件暴露出来的方法，执行这个方法可以return一个数据。

2、defineEmits

子组件向父组件事件传递。也可以传递数据。

在子组件B中通过defineEmits注册一个事件名，然后在子组件B的方法中通过emit传递给父组件A。在组件A中，就可以为一些元素添加该事件名绑定事件方法。然后组件A在script setup中写这个事件方法，传递的参数就是子组件B在emit传递过来的值。这个值我们赋值给const的ref定义的数据，从而动态修改数据。

【】

 

3、defineExpose

 这个类似于setup中利用ref实现数据通信的方式，在语法糖需要在子组件B中defineExpose出组件A可以value.出来的数据。