文章目录
前言
上节,我们学习了
- 组件之间的通信,让组件之间实现了不同的需求,我们通过给组件添加不同的属性来实现
![](https://i-blog.csdnimg.cn/blog_migrate/601b36bc4866fbc3b856a5242429ba27.png)
问题
1:在Vue中如何去传递不同的组件结构呢?
- 这就涉及到了组件内容的分发处理,使用插槽(slot)。
本节内容
插槽 slot
在Vue中是通过 插槽slot方式来进行分发处理的
- Vue 实现了一套内容分发的 API,将
<slot>
元素作为承载分发内容的出口。 - 这套 API 的设计灵感源自
Web Components 规范草案
>> 使用
组件内的结构,<p>logo</p> 会被分发到<slot></slot>所在的区域
![](https://i-blog.csdnimg.cn/blog_migrate/7ce3f0b83ec335d05d025d150c6b98a1.png)
>> 效果 (前后相同)
![](https://i-blog.csdnimg.cn/blog_migrate/190067df050181f19b90db152523a61f.png)
插槽的特性
- 渲染作用域 -> 插槽只能获取
当前组件
的作用域 - 具名插槽 -> 处理
多个插槽
的需求,通过v-slot
指令实现,简写为#
- 作用域插槽 -> 插槽能访问子组件的数据
实战
> 实例 1:【作用域】根组件中渲染
> 效果
![](https://i-blog.csdnimg.cn/blog_migrate/5fa81a631ed3e333c131de2edb5b6e74.png)
> 原因
<p>logo, {{ message }}, {{ count }}</p>
的作用域属于根组件
,只能调用根组件的return
>> 实例 2:【具名插槽】即多个插槽
- 定义:
<template
v-slot:title>
简写为:<template
#:title>
- 使用:
<slot
name=“title”>
![](https://i-blog.csdnimg.cn/blog_migrate/7033d4dfd4478e372b306c3beda8d6d9.png)
> 效果
![](https://i-blog.csdnimg.cn/blog_migrate/571ea2b0e092299859db2e794605c9e9.png)
>> 实例 3:【作用域插槽】插槽能访问子组件的数据
- Step 1:定义数据
组件MyHead中返回 'list: ['首页', '视频', '音乐']
- Step 2:传递给slot
<slot name="list" :list="list"></slot>
- Step 3:传递给元素
<template #list="{ list }">
- Step 4:处理
<li v-for="item in list">{{ item }}</li>
,可省略
> 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.global.js"></script>
</head>
<body>
<div id="app">
<my-head>
<template #title="{ count }">
<p>logo, {{ message }}, {{ count }}</p>
</template>
<template #list="{ list }">
<ul>
<li v-for="item in list">{{ item }}</li>
</ul>
</template>
</my-head>
</div>
<script>
let app = Vue.createApp({
data(){
return {
message: 'hello'
}
}
})
app.component('MyHead', {
data(){
return {
count: 123,
list: ['首页', '视频', '音乐']
};
},
template: `
<header>
<slot></slot>
<slot name="title" :count="count"></slot>
<slot name="list" :list="list"></slot>
</header>
`,
});
let vm = app.mount('#app');
</script>
</body>
</html>
> 效果
![](https://i-blog.csdnimg.cn/blog_migrate/2dced96344994c54c73cdcf3759d2663.png)
公众号 回复 idea 获取webstorm 2023.3.4 永久免费使用
公众号 回复 vip 获取欧洲正版,全家桶、全插件、全主题,每年只需一杯咖啡