插槽

Vue中的插槽总结为3种：默认插槽、具名插槽、作用域插槽，其中作用域插槽在项目开发过程中经常使用到。
插槽的作用可以让父组件向子组件中插入HMTL结构，也是一种组件间通信的方式。

1.默认插槽

父组件中：

<Category>
       <div>html结构1</div>
</Category>

子组件中：

<template>
    <div>
       <!-- 定义插槽 -->
       <slot>插槽默认内容...</slot>
    </div>
</template>

**在父组件中定义的样式结构直接插入子组件**

2.具名插槽

父组件中：

        <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>

3.作用域插槽

作用域插槽可以进行组件间通信
使用样例：
父组件中：

		<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>

官方文档中这样描述： 组件有编译作用域---父级模板里的所有内容都是在[父级作用域]中编译的，子模板里的所有内容都是在子作用域中编译的。
如上例中子组件Category中<slot :games="games"></slot>通过绑定子组件的数据games，从而可以让使用的父组件可以访问到子组件的数据。父组件<template v-slot="scopeData">绑定接受子组件数据。

学习记录ing 知识面不全