总结:
作用域插槽:
scope 用于父组件往子组件插槽放的html结构接收子组件的数据。
理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(相当于子组件向父组件传数据)(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)
父组件中:
<Category>
<template scope="scopeData">
<!-- 生成的是ul列表 -->
<ul>
<li v-for="g in scopeData.games" :key="g">{{g}}</li>
</ul>
</template>
</Category>
<Category>
<template slot-scope="scopeData">
<!-- 生成的是h4标题 -->
<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
</template>
</Category>
子组件中:
<template>
<div>
<slot :games="games"></slot>
</div>
</template>
<script>
export default {
name:'Category',
props:['title'],
//数据在子组件自身
data() {
return {
games:['红色警戒','穿越火线','劲舞团','超级玛丽']
}
},
}
</script>
接前面文章,作用域插槽也可以实现具名插槽有 name 的功能
此时我们 app.vue 是 Category 的使用者, 而且数据也在自己这
然后我们把这数据放入 category 组件中
但是如果这么写的话肯定不行, 因为数据在 category 里面, 在 app.vue 里根本读不到, 这就是一个作用域的问题。
即数据在 category 里面, 但是根据数据生成的结构, 需要 category 的使用者决定, 也就是需要 app 去得到这个在 category 里面的数据。
解决办法:
在 slot 标签里面像 props 一样传入一个值,
这样写就是把对应数据(games)传给了插槽的使用者, 也就是子组件 category 把它的 games 数据传给了它的使用者。
也就谁使用了这个插槽,就把这个数据给哪个使用者
相当于 app.vue 往插槽里塞东西, 而插槽把它的对应传的数据给了 app.vue
但是前提是一定在在外面包裹一个 template, 否则就不行
这边写了一个 scope='xxx',xxx 随你定义,因为这个 xxx 就是一个对象会接收你传过来的值, 这样就解决了多个传值的问题
所以这样改下就行
简写:因为它支持结构赋值
还可以把 scope 改成 slot-scope