解释 Vue 3 源码中如何处理组件的 `props` 校验和默认值设置,以及其内部的类型检查逻辑。

各位靓仔靓女们,大家好! 欢迎来到今天的Vue 3源码解密小课堂。今天咱们就来聊聊Vue 3组件里那些“磨人的小妖精”——props,看看Vue是如何给它们验明正身,又如何给它们安排默认值的。准备好了吗?Let’s dive in!

一、Props:组件的“身份证”和“户口本”

在Vue的世界里,props就像组件的身份证和户口本,它定义了组件可以接收哪些数据,这些数据是什么类型,以及如果调用组件的人没给这些数据,组件该怎么办。

// 一个简单的例子
<template>
  <div>
    <h1>{
  
  { title }}</h1>
    <p>作者: {
  
  { author }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    title: {
      type: String,
      required: true
    },
    author: {
      type: String,
      default: '匿名'
    }
  },
  setup(props) {
    console.log(props.title); // 可以访问 title
    console.log(props.a
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值