本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
🔗本阶段对应的“官方文档”阅读 （❗️本知识点 Vue 2.6.0 有更新，本篇先熟悉什么是“作用域插槽”！）
1 为什么需要“作用域插槽”
先看以下代码：
<body>
<div id="root">
<child></child>
</div>
<script>
Vue.component("child", {
data: function() {
return {
list: [1, 2, 3, 4]
}
},
template: `<div>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
</div>`
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
❓以上代码可以正常的显示列表，但现在我有一个需求：
这个 child 组件有可能在很多的地方被调用，而我希望：在不同的地方调用 child 时，这个“列表的循环”的样式是怎样的，不是由子组件 child 控制，而是外部告诉我们子组件的每一项应该怎么渲染！
<body>
<div id="root">
<child> <!-- 1️⃣首先，父组件调用子组件的时候，给子组件传了一个“插槽”，
这个“插槽”叫做“作用域插槽”。 -->
<template slot-scope="props"> <!-- 2️⃣“作用域插槽”必须是一个用占位标签 template
包裹的内容！
3️⃣同时，这个插槽要声明，我要从子组件接收的数据
都放在 props 里边； -->
<h1>{{props.item}}</h1> <!-- 4️⃣然后，还要告诉子组件一个模板的信息，我们接收到的数据
应该以“h1 标签包裹数据 props.item ”的方式展示； -->
</template>
</child>
</div>
<script>
Vue.component("child", {
data: function() {
return {
list: [1, 2, 3, 4]
}
},
template: `<div>
<ul>
<slot
v-for="item of list"
:item=item
></slot>
</ul>
</div>`
}) /*
🚀这段代码的意思：这个 child 组件去做一个列表的循环，但列表项中的每一项怎么“显示”，我并不关心；
❗️具体要怎么显示，由外部来告诉我怎么显示。
*/
var vm = new Vue({
el:"#root"
})
</script>
</body>
祝好，qdywxs ♥ you！
