什么是组件？

组件化的意义：复用性、扩展性，可维护性。

• 复用性：可以在多个地方使用，避免了重复的代码。
• 扩展性：可以很容易地扩展，添加新的功能或样式。
• 可维护性：可以被单独维护，不需要修改其他地方的代码。

ps:就是不要让单页出现3k+的代码，不好维护，但是多个组件数据用的是用一个，所以要通信。

组件案例

组件其实就是单独的vue文件，增加了props、emit、solt等功能，让其变成了组件。

• useAttrs 获取组件上没有在props中定义的属性

• useSlots 获取插槽内容

• defineProps 定义props

• defineEmits 定义emit

• defineModel 定义v-model

<template>
  <div class="Header">
    <!-- 使用具名插槽，告知模板应该把名叫left的放在这儿 -->
    <slot name="left"></slot>
    <!-- 默认插槽 -->
    <slot>{{message}}</slot>
    <slot name="right"></solt>
    <!-- 假设使用的是Element-puls中的el-input 组件,使用如下： -->
    <!-- <el-input v-bind="attrs"></el-input> -->
  </div>
  </div>
</template>
<script setup lang="ts">
import {useAttrs,useSlots,defineModel,defineProps,defineEmits} from 'vue'
// 定义当前组件触发事件，用于告知父组件被调用，抑或是传值给父组件
const emit =defineEmits(['update'])
interface PropsOption {
  message: string;
}
// 定义当前组件接受的传值
const props = defineProps<PropsOption>();
// 获取当前组件不需要的值，并且这些值是UI框架组件上所需要的可以通过v-bind="attrs" 传递给UI框架
const attrs =useSlots()

// 申明一个当前组件的v-model供父组件使用,案例使用方式 v-model:count=""
const count = defineModel('count',{ type: Number, default: 0 })
// 当前组件使用方式与ref申明的变量一样，且当前组件修改会默认触发 emit('update:count',count.value)
modelValue.value =2
// 父组件监听该事件'update:count' 事件，并修改父组件的值
</script>

页面如何使用Header

<template>
  <!-- 使用 -->
  <Header message="子组件需要的值" v-model @update:count="">
    <!-- 使用name='left'的插槽，填入模板中内容 -->
    <template #left>
      <div>left</div>
    </template>
    <!-- 使用默认插槽，则填入没有name值的插槽 -->
    <template #default>
      <div>default</div>
    </template>
    <template #right>
      <div>right</div>
    </template>
  </Header>
</template>
<script setup lang="ts">
// 1.引入
import Header from './Header.vue'

const text = ref('12345')
</script>