Vue 组件与 Props

学习 Vue 组件的基本概念，用 Props 从父组件向子组件传递数据 · 难度：进阶 · +20XP

什么是组件？

组件（Component）是 Vue 的积木。一个复杂的页面，可以拆成很多小的组件，每个组件负责一块功能。

比如一个网页可以拆成：Header（头部导航）、Sidebar（侧边栏）、Content（内容区）、Footer（底部）。

定义一个组件

app.component("user-card", {
  props: ["name", "age"],            <!-- 接收的数据（Props）-->
  template: 
    &lt;div&gt;
      &lt;h3&gt;{{ name }}&lt;/h3&gt;           &lt;!-- 使用 Props --&gt;
      &lt;p&gt;{{ age }}岁&lt;/p&gt;
    &lt;/div&gt;
  
});

使用组件（父传子）

<user-card name="张三" :age="25"></user-card>
<user-card name="李四" :age="22"></user-card>

注意：age 前面有冒号 :age，因为 25 是数字不是字符串。不加冒号的话会当成字符串 "25"。

Props 验证（推荐写法）

props: {
  name: { type: String, required: true },    <!-- 必填，必须是字符串 -->
  age: { type: Number, default: 18 },        <!-- 数字，默认 18 -->
  isAdmin: { type: Boolean, default: false }  <!-- 布尔，默认 false -->
}

重要规则

Props 是单向的：只能父组件传给子组件。子组件不应该修改 props 的值。如果子组件需要修改，应该通知父组件去改。

动手试试

1. 右边定义了一个 UserCard 组件，并在页面上用了两次，传了不同的数据
2. 试着加第三个 UserCard，传入你自己的信息
3. 试着给 UserCard 增加一个 props，比如邮箱