Vue插槽

默认插槽

 在组件内部使用<slot></slot>,这样就可以在外部组件中放东西了，类似于

<Category title="游戏" >

      <ul>

        <li v-for="(g,index) in games" :key="index">{{g}}</li>

      </ul>

    </Category>

而这个slot会被ul覆盖

当使用者没有传递具体结构时，就按照<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>之间的东西显示

具名插槽

具名插槽就是有名字的插槽，我们上次写的插槽是没有名字的

使用方式就是

在使用组件内使用slot时声明一个name，指明它的名字

 

然后通过slot="slot"插槽名指明它是那个插槽

这里要注意的一点，如果我们在template中声明了插槽那么就有第二种写法

 v-slot:footer

 作用域插槽

数据来自于插槽内部，而使用的结构由使用者而定义的

所以ul不能写在插槽里面 

如果这样写App.vue就访问不到了categroy的数据了，就类似于我们js表达式中的作用域，现在我们需要通过某些方式，让 App.vue能访问到categroy的数据

谁往里面塞结构，那么这个games就传给谁

结构的外部必须包裹着template 否则拿不到数据,还有添加一个属性scope

但是这个名拿到是插槽的对象，因此我们可以通过结构赋值拿出专门属于games的值

否则也会拿到msg的值

 结构赋值

总结

 * 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 `<strong style="color:red">`父组件 ===> 子组件`</strong>` 。
* 分类：默认插槽、具名插槽、作用域插槽
* 使用方式：

默认插槽：

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

具名插槽：

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

作用域插槽：

* 理解：`<span style="color:red">`数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（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>