Vue 3 快速入门 第六章
接上文，我继续讲述 Vue 3 中的组件的相关知识。
目录
组件 v-model
原理
作用
自定义组件上使用
插槽
作用
基本使用
渲染作用域
设置默认值
具名插槽
作用域插槽
组件 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>