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 范围中声明的局部变量。这样做会引起编译错误。但是，它可以引用导入的绑定，因为它们也在模块范围内。

如果使用了 Typescript，使用纯类型声明来声明 prop 也是可以的。

(\ _ /)
( * . *)
/>❤️