Vue基础教程（114）组件和组合API之使用prop向子组件传递数据之prop验证：Vue组件数据投喂指南：给你的Prop加上“霸道保安”

好的，朋友们！今天咱们不聊风花雪月，来聊聊Vue世界里一件至关重要的大事——给组件“投喂”数据时，如何先做个“安检”。

想象一下，你写了个超帅的按钮组件，期待别人传个String类型的color，结果隔壁老王传了个Array进来，你的按钮当场“花容失色”，页面直接“扑街”。这能忍？

所以，Vue给我们准备了一个神器：Prop验证。它就像是组件门口的“霸道保安”，数据想进门？先亮明身份，验明正身！

---

第一章：从前，有个不设防的组件…

咱们先来个“事故现场还原”。你写了一个UserCard组件，指望父组件给它传个用户信息。

<!-- 子组件：UserCard.vue -->
<template>
  <div class="user-card">
    <h2>欢迎，{
  
  { name }}！</h2>
    <p>年龄：{
  
  { age }}</p>
  </div>
</template>
<script>
export default {
  props: ['name', 'age']
}
</script>

父组件是这么用的：

<!-- 父组件 -->
<template>
  <UserCard name="张三" :age="25" />
</template>

完美！页面显示：“欢迎，张三！年龄：25”。你觉得自己真是个天才。

但好景不长，你的同事（或者一个月后的你自己）是这么用的：

<!-- 父组件的作死用法 -->
<template>
  <UserCard :name="123" :age="'二十五'" />
</template>

页面瞬间裂开：显示“欢迎，123！年龄：二十五”。数字当名字，字符串当年龄？虽然没报错，但逻辑全乱套了！数据库查询可能失败，计算可能出NaN，整个应用的行为变得不可预测。

你看，没有验证的Prop，就像没有保安的小区，谁都能进，指不定进来个什么玩意儿。

第二章：保安上岗！基础Prop验证

是时候请出我们的“保安”——Prop验证了。改造一下UserCard.vue：

<!-- UserCard.vue 升级版 -->
<template>
  <div class="user-card">
    <h2>欢迎，{
  
  { name }}！</h2>
    <p>年龄：{
  
  { age }}</p>
  </div&