stars() {
return [1, 2, 3, 4, 5].map(value => this.rating < value);
}
}
};
</script>
这是我们写死的一个星级评价组件，一直都用着还不错，可是突然有一天呢，产品说这个小星星用腻歪了能不能换个别的图标？我最近爱上了 :heart: 形
所以用这个表示吧。到这里，你可能也想到了我们把这个图标给抽离出来，放在外部，所以我们结合上面刚刚学到的
<slot> 元素去修改组件。
<div class="rate-list">
<slot></slot>
</div>在父组件中使用：
<rate-list>
<span
v-for="(star, index) in stars"
:key="index"
@click="clickStart(index)"
>
<i v-bind:class="[star ? off : on]"></i>
</span>
</rate-list>
完成之后呢，我们再也不怕以后更换内容的情况了，不管以后怎么换，我都可以在使用的时候直接在外部添加内容即可，但是似乎有一些问题，因为我们的代码看起来不是很优雅，而且我们把操作逻辑都放在的父组件中，这显然不太友好，最好的方式肯定是我们只需要在父组件中直接调用即可，所以作用域插槽这里就起到很大的作用了，我们来看看如果使用作用域插槽是如何保持优雅的。
<div class="rate-list">
<span
v-for="(star, index) in stars"
:key="index"
@click="clickStart(index)"
>
<slot :star="star"></slot>
</span>
</div>在父组件中使用：
<div class="rate-list">
<span
v-for="(star, index) in stars"
:key="index"
@click="clickStart(index)"
>
<slot :star="star"></slot>
</span>
</div>可以看到我们把操作逻辑全部都放在了组件内部，在外部我们只需要添加需要的元素即可，简单优雅高复用性。
在 Vue2.5.0+，slot-scope 不再限制在
<template> 元素上使用，而可以用在插槽内的任何元素或组件上有些同学看到这里可能还没有很好的理解 作用域插槽 ，那好吧我就送佛送到西，咱继续看一个例子，我们创建一个列表面板组件。
<template>
<div class="list-box">
<h1>{{title}}</h1>
<ul>
<li v-for="(item, index) in list" :key="index">
<slot :item="item"></slot>
</li>
</ul>
</div>
