4.6 插槽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue2.x.js"></script>
<style>
body{
margin: 0;
font-size: 14px;
}
h3{
margin: 0;
}
.title{
width: 1000px;
padding: 0 20px;
height: 50px;
line-height: 50px;
margin: 20px auto;
background: #f4f0ea;
}
.title h3{
float: left;
font-size: 28px;
margin-right: 20px;
}
.subtitle{
float: left;
}
.more{
float: right;
margin-left: 30px;
}
.title a{
color: #333;
text-decoration: none;
}
.title a:hover,.title a.active{
color: #b4a078;
border-bottom: 2px solid #b4a078;;
}
.tab{
float: left;
}
.subnav{
float: right;
}
</style>
</head>
<body>
<!-- <div class="title">
<h3>新品首发</h3>
<span class="subtitle">为你寻觅世间好物</span>
<div class="tab">
<a href="#" class="active">编辑推荐</a>
<a href="#">热销总榜</a>
</div>
<div class="more">
<a href="#">更多新品></a>
</div>
<div class="subnav">
<a href="#">好物精选</a> / <a href="#">秋冬焕新</a> / <a href="#">疫情防控</a> / <a href="#">收纳好物</a> / <a href="#">北欧原木</a> / <a href="#">餐厨爆款清单</a> / <a href="#">厨房电器</a>
</div>
</div> -->
<div id="app">
<section-head>
<!-- <h3>新品首发 - 这是通过插槽添加的内容</h3>
<h3>人气推荐 - 再来一个，也会显示</h3> -->
<template v-slot:title>
<h3>新品首发</h3>
</template>
<template #subtitle>
<span class="subtitle">为你寻觅世间好物</span>
</template>
<template #more>
<div class="more">
<a href="#">更多新品></a>
</div>
</template>
</section-head>
<section-head>
<!-- 即使这里的顺序变了也没关系，它只会按定义插槽地方的顺序解析 -->
<template #more>
<div class="more">
<a href="#">更多推荐></a>
</div>
</template>
<template #title>
<h3>人气推荐</h3>
</template>
<template #tab>
<div class="tab">
<a href="#" class="active">编辑推荐</a>
<a href="#">热销总榜</a>
</div>
</template>
</section-head>
<section-head>
<template #title>
<h3>福利社</h3>
</template>
<template #more class="more">
<div class="more">
<a href="#">查看全部福利></a>
</div>
</template>
</section-head>
<section-head>
<template #title>
<h3>居家生活</h3>
</template>
<template #more class="more">
<div class="more">
<a href="#">查看更多></a>
</div>
</template>
<template #subnav>
<div class="subnav">
<a href="#">好物精选</a> / <a href="#">秋冬焕新</a> / <a href="#">疫情防控</a> / <a href="#">收纳好物</a> / <a href="#">北欧原木</a> / <a href="#">餐厨爆款清单</a> / <a href="#">厨房电器</a>
</div>
</template>
</section-head>
</div>
<template id="head">
<div class="title">
<!-- <slot></slot> -->
<slot name='title'></slot>
<slot name='subtitle'></slot>
<slot name='tab'></slot>
<slot name='more'></slot>
<slot name='subnav'></slot>
<slot></slot>
</div>
</template>
<script>
new Vue({
el:'#app',
components:{
SectionHead:{
template:'#head',
}
}
});
/*
1、这节课我们来学习插槽，先别说什么是插槽，我先来吐槽。有没有发现当你学一门新技术的时候总会有一些新名词新概念，有的还很奇葩。
1、比如javascript有个名词叫弱类型语言，什么叫弱？是不行么？大家都知道做为男人最讨厌别人说不行，做为男人怎么能不行呢
2、那你说人家js不行？你是来搞笑了的吧？所以有些词起的就想让人想抽它
2、那vue里的插槽是啥意思，是插座里的孔么，天生就得被人插的？有些词真的太奇葩，起得让人浮想联翩，春心荡漾
3、在正经介绍插槽前，我先通过一个小功能来让大家理解什么叫他妈的插槽。
4、把网易严选打开you.163.com
1、看每个标题，像么？但是结构有不一样的地方。像这样的功能我们往往都会做一个通用的
2、那我问你，这里头不一样的结构你该怎么处理？是不是要把所有的结构都写出来，然后每个标题里需要哪个，你就添加哪个。没有的就不用给了
3、比如大标题后面的一段小文本，你得写出来吧，第一个标题里有你就给。第二个标题里没有就不用给
4、咱们上节课学习了props，那这种有差异的结构props如何传递数据？props要依赖相同的结构传递数据，结构不同它就没法传递数据了。那怎么办？用插槽
5、插槽就可以来做这件事，在同样的结构里，使用插槽可以搞定差异结构
5、来，正经的讲讲插槽
1、插槽，英文名字叫slot，它的作用是用来分发内容，怎么分发呢？需要有个凭据才行。
2、就像插线板一样，上面有三个孔的，有两个孔的，有一个孔的（usb）。厂家把能用到的孔都提供了，你买了一个，我也买了一个。你用了一个三个孔，我用了一个两个孔。
3、那我问你，我能不能用三个孔，你能不能用两个孔？肯定是可以的吧，为啥？因为插板里有这些孔。但是我用不用取决了我需不需要
4、这个就叫内容分发，分发的依据是什么呢？插孔。只有插板给你提供这个插孔了，你才可以用。没提供，不好意思你用不了
6、我把插线板与标题功能结合到一起，你就能明白什么是插槽了
1、标题会写成一个插件，一个标题的插件好比一个插线板
2、标题里面的每个内容就好比插板里的每个插孔
3、每个内容是不是不一样，那插孔的类型是不是也不同，有三个的，两个的，一个的
4、标题组件在生成的时候就带了这些内容，插线板在出厂的时候已经有了这些不同的插孔
5、使用标题组件生成“人气推荐”标题，它用了三个内容（大标题、选项卡标题、更多链接）；好比你买了一个插线板，分别用了个三个孔、用了个两个孔、用了个一个孔。也是三个内容
6、使用标题组件生成“福利社”标题，它用了两个内容（大标题、更多链接）；好比我也买了一个插线板，分别用了个三个孔和一个孔
7、问题来了，我能不能用两个孔（福利社组件里能不能显示选项卡标题）？当然可以，但是我不需要（福利社组件里不需要选项卡标题）
8、这回明白什么是插槽了吧
7、下面咱来上代码试试
1、先写模板
<template id="head">
<div>
<slot></slot>
//1、插槽用slot来表示，它是一个vue的内置组件（api最下面）
//2、放到这表示这里代表了组件里的一块内容（大标题），渲染的时候它会被内容给替换掉
//3、好比插线板里的一个孔。记住打孔是要在模板里做的
</div>
</template>
2、有了插口后，怎么使用？先定义一个组件
new Vue({
el:'#app',
components:{
SectionHead:{
template:'#head',
}
}
});
3、接下来调用组件，组件好了，标题的孔也打好了。现在就要用了，怎么用呢？把h3标签放到组件的标签对里面就行了
<div id="app">
<section-head> //注意如果插槽没定义，组件标签里写的内容是不会被渲染的
<h3>新品首发 - 这是通过插槽添加的内容</h3>
<h3>人气推荐 - 再来一个，也会显示</h3>
</section-head>
</div>
1、不过这里有个问题，就是这个插槽跟标题其实并没关系。不信，我换成个更多的链接它照样显示
2、其实插槽要这么写的话，它只是占了个坑，至于这个坑谁能蹲？没有要求，谁都可以蹲。注意啦！我这里特别要强调一下，你们不用脑补去那种地方蹲坑的场景！一定不要啊~
3、而在真正开发当中是需要实名制的。你的坑只能你来蹲，别人是蹲不了的。就需要用到具名插槽
8、具名插槽
1、具名插槽就是给插槽起上个名字，实名制。在用的时候通过名字关联上，就一一对应了
2、名字是通过slot的name属性添加的，加了这个后它就叫具名插槽了
3、你在用的时候，需要通过template标签并配合#插槽名（指令，看一下api），把内容放到template标签对里就行了
1、这个指令只能用在template和组件上，并且组件是有要求的，后面会说
4、当v-slot指令(可以缩写为#)的值与slot的name一致的话，就对上眼了就能匹配了
5、如果你用的时候没有给名字，那这个内容会显示到默认插槽上<slot></slot>
1、把最后一个<section-head>里的#title去掉后瞧一下
2、标题依然存在，但是显示到了最后面。删除前删除后对比一下html里的位置
3、如果想显示在默认的插槽上还可以显式的给一个default的值，给template的#default
<template #default>
<h3>居家生活</h3>
</template>
4、这么设置与不加v-slot是一样的，只不过更清晰意图更明确一点。其实
9、最后拿插槽与props做个对比，插槽让组件使用起来更加像真正的HTML标签了，数据不需要通过属性传播，直接通过里面的标签进行传播
*/
/*
slot 插槽，用于分发内容（是Vue的内部组件）
语法：
template里定义：<slot></slot>
组件标签对里使用（标签对里的标签能被解析）
注意：插槽只能写一个，写多个会报错
具名插槽 给slot添加name属性后就叫具名插槽
语法
template里定义：<slot name="属性名"></slot>
组件标签对里使用：<template #属性名><p></p></template>
//在template里开个槽，给个名字（做个记号），在组件中根据记号填上数据并使用。其实就是在template中挖个坑，在组件里填点土，让组件能更像真正的html（所有的标签都可以大胆写出来了）
*/
</script>
</body>
</html>
插槽：1.模版定义具名插槽. 2.<template>按需使用插槽</template>
浙公网安备 33010602011771号