【Vue】作用域插槽

总结：

作用域插槽：
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