开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue3系列：（四）vue3使用props、defineProps实现父子传参 -> 正文阅读

[JavaScript知识库]vue3系列：（四）vue3使用props、defineProps实现父子传参

组合式API（SFC）

一个组件选项，在组件被创建之前，props?被解析之后执行。它是组合式 API 的入口。

入参：
- {Data} props
- {SetupContext} context
与使用选项式 API 时的?this.$props?类似，该?props?对象将仅包含显性声明的 prop。并且，所有声明了的 prop，不管父组件是否向其传递了，都将出现在?props?对象中。其中未被传入的可选的 prop 的值会是?undefined。

如果需要检测一个可选的 prop 是否未被传递，你可以将其默认值设置为一个 Symbol：
```
const isAbsent = Symbol()
export default {
  props: {
    foo: { default: isAbsent }
  },
  setup(props) {
    if (props.foo === isAbsent) {
      // foo 没有被传入。
    }
  }
}
```

类型声明：

interface Data {
  [key: string]: unknown
}

interface SetupContext {
  attrs: Data
  slots: Slots
  emit: (event: string, ...args: unknown[]) => void
  expose: (exposed?: Record<string, any>) => void
}

function setup(props: Data, context: SetupContext): Data

TIP若要对传递给?setup()?的参数进行类型推断，你需要使用?[defineComponent]。

单文件组件`<script setup>`

在?<script setup>?中必须使用?defineProps?API 来声明?props?，它们具备完整的类型推断并且在?<script setup>?中是直接可用的：

<script setup>
    const props = defineProps({
      belong: {
        type: String,
        required: true,
      },
    });
</script>

//父组件
  <Test :name="name"></Test>

defineProps?是只在?<script setup>?中才能使用的编译器宏。他们不需要导入且会随着?<script setup>?处理过程一同被编译掉。
defineProps?接收与?props?选项相同的值。
defineProps?在选项传入后，会提供恰当的类型推断。
传入到?defineProps?的选项会从 setup 中提升到模块的范围。因此，传入的选项不能引用在 setup 范围中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块范围内。