接上文，我继续讲述 Vue 3 中的组件的相关知识。
目录
组件 v-model
原理
v-model 是 Vue 提供的一个语法糖，用于在表单元素和组件上实现双向数据绑定。它的本质是一个 value 属性绑定和一个事件监听的组合。
<input type="text" v-model="message">
<input
:value="message"
@input="message = $event.target.value"
>作用
提供数据的双向绑定
数据变，视图跟着变 :value
视图变，数据跟着变 @input
$event用于在模板中，获取事件的形参
自定义组件上使用
在 Vue 3 中，自定义组件上使用v-model，相当于使用modelValue属性，同时触发 updata:modelValue 事件
<MyTest v-model="isVisible">
// 相当于
<MyTest :modelValue="isVisible" @update:modelValue="isVisible=$event">我们需要先定义props，再定义emits。其中有许多重复的代码。如果需要修改此值，还需要手动调用emits值，非常麻烦。
<!-- 父组件 -->
<script setup lang="ts">
import MyInput from './components/my-input.vue';
import { ref } from 'vue'
const txt = ref('123456')
</script>
<template>
<div>
<MyInput v-model="txt"></MyInput>
{{ txt }}
</div>
</template>
<style scoped></style>
<!-- 子组件 -->
<template>
<div>
<input type="text" :value="modelValue" @input="e => emit('update:modelValue', (e.target as HTMLInputElement).value)" />
</div>
</template>
<script setup lang="ts">
defineProps({
modelValue: String
})
const emit = defineEmits(['update:modelValue'])
</script>
<style scoped></style>
从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏：
<template>
<div>
<input type="text" :value="modelValue" @input="e => modelValue = (e.target as HTMLInputElement).value" />
</div>
</template>
<script setup lang="ts">
import { defineModel } from 'vue'
const modelValue = defineModel()
</script>
<style scoped></style>defineModel() 返回的值是一个 ref。它可以像其他 ref 一样被访问以及修改，不过它能起到在父组件和当前变量之间的双向绑定的作用：
- 它的
.value和父组件的v-model的值同步； - 当它被子组件变更了，会触发父组件绑定的值一起更新。
本质原理还是和上面的一样。
插槽
作用
让组件内部的一些结构支持自定义
基本使用
1.组件内部需要定制的结构部分，改用<slot></slot>占用
2.使用组件时，组件标签内部传入结构代替solt
<FancyButton>
Click me! <!-- 插槽内容 -->
</FancyButton><button class="fancy-btn">
<slot></slot> <!-- 插槽出口 -->
</button>渲染作用域
插槽内容可以访问到父组件的数据作用域，但是无法访问子组件的数据。
设置默认值
在<slot>标签内可以放置内容作为默认内容
<button type="submit">
<slot>
Submit <!-- 默认内容 -->
</slot>
</button>具名插槽
作用：定制组件内多处内容
语法：
废话不多说，直接上代码
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div><BaseLayout>
<template v-slot:header>
<!-- header 插槽的内容放这里 -->
</template>
</BaseLayout>没有提供 name 的 <slot> 出口会隐式地命名为“default”
v-slot 有对应的简写 #，因此 <template v-slot:header> 可以简写为 <template #header>。
当一个组件同时接收默认插槽和具名插槽时，所有位于顶级的非 <template> 节点都被隐式地视为默认插槽的内容。
<BaseLayout>
<template #header>
<h1>Here might be a page title</h1>
</template>
<template #default>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
</template>
<template #footer>
<p>Here's some contact info</p>
</template>
</BaseLayout>也就是说，上面的这一段可以简化为下面这一段。
<BaseLayout>
<template #header>
<h1>Here might be a page title</h1>
</template>
<!-- 隐式的默认插槽 -->
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template #footer>
<p>Here's some contact info</p>
</template>
</BaseLayout>作用域插槽
允许子组件向父组件传递数据，使父组件可以自定义如何渲染这些数据。
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<slot :user="user" :age="age"></slot>
</div>
</template>
<script setup>
const user = ref('张三')
const age = ref(25)
</script>
<!-- 父组件使用 -->
<ChildComponent v-slot="slotProps">
用户名：{{ slotProps.user }}，年龄：{{ slotProps.age }}
</ChildComponent>