Vue2：slot插槽的三种用法

一、场景描述

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式
适用于父组件 ===> 子组件

二、插槽

1、默认插槽

父组件给子组件传data数据和HTML结构
子组件只有一个slot

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

2、具名插槽

父组件向子组件的指定slot，传递data数据和HTML结构
子组件可以有多个slot，每个slot指定name值

      父组件中：
              <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、作用域插槽

数据在子组件中，子组件向父组件传data数据，父组件向子组件传HTML结构
子组件可以有多个slot，每个slot指定name值

         父组件中：
         		<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>

三、总结

1、slot中可以绑定多组数据
绑定数据

<slot :games="games" msg="test"></slot>

获取数据

                <template scope="data"  slot="center">
                    <ul slot="center">
                        <li v-for="(g,index) in data.games" :key="index">{{g}}</li>
                    </ul>
                </template>
                <template scope="data"  slot="footer">
                    <h4>{{data.msg}}</h4>
                </template>

2、在第三种用法中，如果slot是多个，那么，在父组件中使用的时候，需要指定slot进行使用
绑定数据

<slot :games="games" msg="test"></slot>

获取数据

				<template scope="data"  slot="footer">
                    <h4>{{data.msg}}</h4>
                    <h4>{{data.games}}</h4>
                </template>