什么是slot
slot的官方定义是用于组件内容分发，简单通俗的解释就是在组件化开发中，虽然组件都是一样的，但是在不同的使用场景，组件的某一部分需要有不同的内容显示（slot还有一个形象的名字“插槽”），slot就好比在组件开发过程中定义的一个参数（通过name值来区分），如果不传入值就当默认值使用，如果传入了新值，在组件调用时就会替换定义时的slot默认值。
[card-default width="100%" label="slot分为以下两类"]
- 匿名
slot - 具名
slot
[/card-default]
匿名slot
匿名slot顾名思义就是没有名字的插槽，特点是可以放任何内容。
首先设想一个弹出提示框的场景，提示框都包含头部、中间内容和底部内容三部分。一般情况下头部、底部是固定不变的，只有中间内容可以任意放置。
下面我们我们基于以上场景说一下匿名插槽的使用。
新建组件
我们创建一个名称为popup.vue的组件。
<template>
<div>
<div>这是标题</div>
<slot>这部分内容会被替换</slot>
<div>这是底部内容</div>
</div>
</template>
<script>
export default {};
</script>引用组件
我们在app.vue中引入刚才定义的组件。
不替换插槽内容
我们先只引入组件，不替换slot的内容
<template>
<div id="app">
<popup>
</popup>
</div>
</template>
<script>
import popup from './components/popup.vue';
export default {
components: { popup },
name: "app",
data() {
return {
msg: "Welcome to Your Vue.js App1",
};
},
mounted: function () {},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>可以看到，slot显示的是默认的内容。
替换插槽内容
这一次，我们替换slot的内容，修改app.vue如下
<template>
<div id="app">
<popup>
这部分内容会被替换
</popup>
</div>
</template>
<script>
import popup from './components/popup.vue';
export default {
components: { popup },
name: "app",
data() {
return {
msg: "Welcome to Your Vue.js App1",
};
},
mounted: function () {},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>再次运行，查看内容
可以看到，slot内容被替换成了我们app.vue中的内容。
[alt type="success"]一个组件中，如果有多个匿名的slot，那么所有的slot都会被替换[/alt]
具名slot
正如上面提到的，一个组件中，如果有多个匿名的slot，那么所有的slot都会被替换，还是上面的场景，如果我们的标题、中间部分及底部都是可替换的，显然匿名slot就无法解决我们的问题。针对这个场景，我们就可以使用具名slot。
具名slot就是有名字的插槽，一旦有了名字，我们就可以针对特定的插槽进行替换。
修改popup.vue组件
这次，我们把标题、中间部分及底部都做成插槽。
<template>
<div>
<slot name="title">这是标题</slot>
<slot name="content">这部分内容会被替换</slot>
<slot name="footer">这是底部内容</slot>
</div>
</template>
<script>
export default {};
</script>修改app.vue
<template>
<div id="app">
<popup>
<div slot="title">这是替换后的标题</div>
<div slot="content">这是替换后的内容</div>
<!-- 不替换底部，显示的是默认值 -->
</popup>
</div>
</template>
<script>
import popup from './components/popup.vue';
export default {
components: { popup },
name: "app",
data() {
return {
msg: "Welcome to Your Vue.js App1",
};
},
mounted: function () {},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
可以看到，替换的内容正确显示，没替换的内容显示了默认值。
支持～～～！