Vue3中新增了一个 script setup 语法糖模式，可以在单文件组件中更简洁地编写组件逻辑。使用 script setup 语法后，props、data、computed、methods 等选项不再需要独立定义，而是可以直接在 setup 函数中声明，代码结构更加清晰，并且可以更方便地使用响应式数据、生命周期等功能。

父子传值，在 script setup 中可以使用 defineProps 函数声明 props，这样就可以更加清晰地指明子组件使用的属性类型和默认值。在组件模板中直接使用props中定义的属性即可，无需额外定义 data。

父组件示例：

<template>
  <ChildComponent :msg="parentMsg" @update-msg="updateParentMsg"></ChildComponent>
</template>

<script setup>
import ChildComponent from "@/components/ChildComponent.vue";
import { ref } from 'vue';

defineProps({
  parentMsg: String
});

const updateParentMsg = (val) => {
  parentMsg.value = val;
};
</script>

子组件示例：

<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="emitMsg">emit</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

defineProps({
  msg: String,
});

const emitMsg = () => {
  emit('update-msg', 'changed by childComponent');
};

defineEmits(['update-msg']);
</script>

在上述代码中，定义 props 和 emits 的方式与非 setup 模式下略有不同，直接使用 defineProps 和 defineEmits 函数来声明。同时，在 setup 函数中可以使用 ref、reactive、computed 等函数来创建响应式数据。

总的来说，使用 script setup 语法糖模式可以让代码更简洁、清晰，减少了不必要的重复定义，同时还能够方便使用 Vue 3 的响应式功能。