<div class="dialog-panel">
<slot name="header"></slot>
<slot name="content"></slot>
<slot name="footer"></slot>
</div>我们在外部使用时，只需要提供相应名称，我们就可以渲染出我们需要的
<dialog-panel>
<template slot="header">
<div class="dialog-header">
<h3 class="title">带名字的插槽</h3>
<button class="close">x</button>
</div>
</template>
<template slot="content">
<div class="dialog-content">这是一个标准的 dialog 对话框</div>
</template>
<template slot="footer">
<div class="dialog-footer">
<el-button type="primary" plain>取消</el-button>
<el-button type="primary">确定</el-button>
</div>
</template>
</dialog-panel>
可以看到，我们在外部可以控制组件的全部内容只要我们需要，这给我们的组件带来了很高的灵活性。除了灵活性，Vue 中还给我提供了一种叫 作用域插槽 的用法，它让我们的组件更加的复用性。
具名插槽不仅仅只能用在
<template> 元素上，它也可以直接用在一个普通的元素上
<div slot="header" class="dialog-header">
<h3 class="title">带名字的插槽</h3>
<button class="close">x</button>
</div>作用域插槽
作用域插槽在 Vue 中是一个非常重要的一个功能，它让组件更加的可复用性，但是官方文档上对作用域插槽的解释很令人蛋疼，反正我是看了几遍不是太理解，最后通过自己写了几个案例才明白原来可以这么厉害，如果你也和我一样一开始不太理解，不妨跟着我看看下面的案例或许对你的帮助很大。
首先我们实现一个星级评价组件
<template>
<div class="rate-list">
<span
v-for="(star, index) in stars"
:key="index"
@click="clickStart(index)"
>
<i v-bind:class="[star ? off : on]"></i>
</span>
</div>
<template>
<script>
export default {
name: "RateList",
data() {
return {
off: "el-icon-star-off",
on: "el-icon-star-on",
rating: 2
};
},
methods: {
clickStart(index) {
this.rating = index + 1;
}
},
computed: {
