1.组件
组件允许我们将界面划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：
 |
定义一个组件
当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)。
以下定义了一个计算点击次数ClickCount.vue的组件：
| <script setup> import { ref } from 'vue'; let count=ref(0) </script> <template> <button @click="count++">你点击了{{ count }}次</button> </template> |
使用组件
要使用一个子组件，我们需要在父组件中导入它。
将计算点击次数ClickCount.vue导入到父组件中，这个组件将会以默认导出的形式被暴露给外部。
| <script setup> //导入组件 import ClickCount from './components/ClickCount.vue'; </script> <template> <ClickCount></ClickCount><br/> </template> |
通过 <script setup>，导入的组件都在模板中直接可用。
组件可以被重用任意多次：
| <ClickCount></ClickCount><br/> <ClickCount></ClickCount><br/> <ClickCount></ClickCount><br/> |
你会注意到，每当点击这些按钮时，每一个组件都维护着自己的状态，是不同的 count。这是因为每当你使用一个组件，就创建了一个新的实例。
在单文件组件中，子组件使用 PascalCase 的标签名，以此来和原生的 HTML 元素作区分。虽然原生 HTML 标签名是不区分大小写的，但 Vue 单文件组件是可以在编译中区分大小写的。我们也可以使用 /> 来关闭一个标签。
| <clickCount/> |
2.组件通信 (主讲：父子组件传值)
1. props 父 传 子
作用：props是使用频率最高的一种通信方式
常用于：父组件给子组件传递值，父 传 子。
实现技术：自定义属性，属性值是需要传的数据。
单向数据流效果：
父组件修改值，子组件发生变化
子组件修改值，父组件不会感知到。父组件传到子组件的值是只读的
实现步骤
父组件 Father.vue
| <script setup> import { ref } from 'vue'; import Son from './Son.vue'; //父组件的数据 let car=ref('迪奥') //换车：修改父组件的数据，子组件也会修改 function changeCar(){ car.value='宝马' } </script> <template> <div class="father"> <h1>父组件</h1> <p>我的车: {{car}}</p> <button @click="changeCar" |
