组件与 props
组件是可复用的 Vue 实例：有自己的数据、模板与方法，通过 app.component("name", 配置) 或单文件组件（.vue 文件）定义。使用时像写 HTML 标签一样 <my-comp></my-comp>。
props 是父到子的单向数据通道：父组件用 :title="值" 传数据，子组件用 props: ["title"] 或对象语法声明并限定类型。子组件不要直接改 props——要改就通过事件通知父组件，这就是单向数据流。
- 组件 = 带名字的可复用 Vue 实例，可嵌套成组件树
- props 声明可加类型/默认值/必填：{ title: String, required: true }
- 单向数据流：父传子用 props，子改父用 $emit 事件
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>组件与 props</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <!-- 同一组件复用三次，传不同数据 --> <product-card name="Vue 书" price="89"></product-card> <product-card name="键盘" price="299"></product-card> </div> <script> const { createApp } = Vue; const app = createApp({}); app.component('product-card', { // 声明 props 并校验类型 props: { name: { type: String, required: true }, price: { type: Number, default: 0 } }, template: ` <div style="border:1px solid #42b883;padding:12px;margin:8px"> <b>{{ name }}</b> <p>价格：{{ price }} 元</p> </div>` }); app.mount('#app'); </script> </body> </html>
本节要点组件通过 props 接收外部数据并校验；props 只读，子想改父数据要发事件。
