目录
用作用域插槽解决上面问题（Vue2.5旧语法，Vue3.0不再包含）
用作用域插槽解决上面问题（Vue2.6+新语法，Vue3.0支持）
前篇：Vue中的插槽和具名插槽(vue 2.5已淘汰的语法和vue3.0支持语法对比)
有了插槽和具名插槽的基础之后，我想如何让大家能够通俗易懂的理解作用域插槽（说实话，刚学这个知识点的时候官方文档我前后看了好多遍都没懂）
接下来的一个例子就是子组件要实现循环显示一个列表，相信百度都能搜到，但是我在这里是为了让大家理解各个参数的意思
不用作用域插槽的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域插槽
</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<child>
</child>
</div>
<script>
Vue.component('child', {
data() {
return {
list: [1, 2, 3, 4]
}
},
template: `<div>
<ul>
<li v-for="item of list">
{{item}}
</li>
</ul>
</div>`
})
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>运行结果
<child>组件可能被很多地方调用，在很多时候列表循环的样式不是<child>所控制的，而是外部控制的。
这里循环渲染的是<li>，由子组件自己指定了，但是外部作用域无法操作，能不能由外部作用域指定呢？比如将数组内容循环渲染到<h1>标签上、渲染到<p>标签上之类的，这都是需要外部来指定如何修改如何渲染，那这们怎么做呢？
当子组件做循环的时候，dom结构、样式应该由外部传递进来的时候就用作用域插槽。
用作用域插槽解决上面问题（Vue2.5旧语法，Vue3.0不再包含）
让插槽内容能够访问子组件中才有的数据是很有用的！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域插槽
</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<child>
<template slot-scope="myScope">
<h1>{{myScope.myItem}}</h1>
</template>
</child>
</div>
<script>
Vue.component('child', {
data() {
return {
list: [1, 2, 3, 4]
}
},
template: `<div>
<ul>
<slot v-for="item of list"
:myItem=item>
</slot>
</ul>
</div>`
})
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>slot-scope="myScope"就是我把作用域起个别名叫做myScope
<slot v-for="item of list" :myItem=item></slot>这里的:myItem=item表示通过myItem绑定数据item
外层作用域中{{myScope.myItem}}表示想显示myScope作用域的myItem绑定的数据，就是每次循环的数据。
只要这里用<h1>标签，就会按照这个样式渲染，用<li>就按照li的样式渲染
官方解释这种例子只是作用于插槽的冰山一角。
用作用域插槽解决上面问题（Vue2.6+新语法，Vue3.0支持）
作用域插槽自 2.6.0 起有所更新，在接下来所有的 2.x 版本中，slot-scope 写法仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。
我们来改写上面例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域插槽
</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<child>
<template #myname="myScope"><!-- #myname等同于v-slot:myname,等同于2.5具名插槽旧语法slot="myname" -->
<h1>{{myScope.myItem}}</h1>
</template>
<template v-slot="myScope1"><!-- 注意这里是v-slot="myScope1"不是slot="myScope1"，要和具名插槽的旧语法区别开 -->
<h2>{{myScope1.myItem}}</h2>
</template>
</child>
</div>
<script>
Vue.component('child', {
data() {
return {
list: [1, 2, 3, 4]
}
},
template: `<div>
<ul>
<slot v-for="item of list"
:myItem=item>
</slot>
<slot name="myname" :myItem=list></slot>
</ul>
</div>`
})
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>运行结果：
在上一个例子的基础上需要再解释一下
#myname是v-slot:myname的简写，即Vue2.5中具名插槽slot="myname"的简写，可以见我的前一篇Vue中的插槽和具名插槽(vue 2.5已淘汰的语法和vue3.0支持语法对比)，就是匹配name为myname的插槽slot
匹配默认插槽不能直接#，会报错，至少加上#default
记得这个<slot>标签上的name一定要小写！否则渲染不出来。
有人会问，应该是数组在前，列表在后呀，记得渲染顺序以插槽<slot>的位置为准，这里子组件的第一个<slot>绑定的是for循环的每条数据，第二个绑定的才是list！
关注、留言，我们一起学习。
===============Talk is cheap, show me the code================
