在父组件中使用：
<rate-list><template slot-scope="props">
<i :class="[props.star ? off : on]"></i>
</template>
</rate-list>
可以看到我们把操作逻辑全部都放在了组件内部，在外部我们只需要添加需要的元素即可，简单优雅高复用性。
在 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>
</template>
<script>
export default {
name: "List",
props: {
title: String,
list: Array
}
};
</script>
在父组件中使用：
<template><div class="tirp-wrapper">
<list title="酒店列表" :list="list">
<span slot-scope="props">
{{props.item.name}}
</span>
</list>
</div>
</template>
<script>
import List from "./List";
export default {
name: "Trip",
components: { List },
data() {
return {
list: [{
name: "四季度假村酒店"
},{
name: "布宜诺斯艾利斯四季酒店"
},{
name: "孟买四季酒店"
},{
name: "新加坡四季酒店"
}]
};
}
};
</script>
我们再来给每个酒店添加一些描述标签，也能够完美的展示出来。
<template><div class="tirp-wrapper">
<list title="酒店列表" :list="list">
<div slot-scope="props">
<span>
{{props.item.name}}
</span>
<el-tag>{{props.item.tag}}</el-tag>
</div>
</list>
</div>
</template>
<script>
import List from "./List";
export default {
name: "Trip",
components: { List },
data() {
return {
list: [{
name: "四季度假村酒店",
tag: "海滨风光"
},{
name: "布宜诺斯艾利斯四季酒店",
tag: "轻奢度假"
},{
name: "孟买四季酒店",
tag: "服务周到"
},{
name: "新加坡四季酒店",
tag: "沙海绿洲"
}]
};
}
};
</script>