<template> <div> <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> <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>
画风一转，下面我们把它变成一个消息通知列表，可以看到每个文章的点赞数量。
<template> <div> <list title="消息通知" :list="list"> <div slot-scope="props"> <span> {{props.item.title}} </span> <el-badge :value="props.item.value" :max="99"> <el-button size="mini"> <i></i> </el-button> </el-badge> </div> </list> </div> </template> <script> import List from "./List"; export default { name: "Trip", components: { List }, data() { return { list: [{ title: "Vue一个案例引发「动画」的使用总结", value: 200 },{ title: "Vue一个案例引发的递归组件的使用", value: 20 },{ title: "Vue一个案例引发的动态组件与全局事件绑定总结", value: 50 }] }; } }; </script>
可以看到，不管我们如何的去修改数据结构也好，添加不同的内容也罢，我们都可以完美的完成，而且不用修改我们的子组件，只需要在外部调用时填充我们需要的内容即可。
有没有感受到作用于插槽的强大与灵活。
如果用一句话来描述作用域插槽的话：它可以让我们在父组件中访问子组件的数据，就像利用 props 属性让子组件访问到父组件的数据一样。
总结
插槽是一个重要且非常强大的功能，它可以让我们的组件具有非常 的灵活性与可复用性，而作用域插槽更加的强化了这些特性。
作用域插槽是一个不太好理解的地方，希望通过本篇文章能够让你解惑。