Vue中的插槽 slot

• 插槽

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

2.分类: 默认插槽、 具名插槽、作用域插槽

3.使用方式:

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 title="游戏">
                  <template scope="daiseng">
                    <ul>
                     <li v-for="(item, index) in daiseng.games" :key="index">{{ item }}</li>
                    </ul>
                  </template>
                  
                </Category>

子组件中:

<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <slot :games="games">我是默认一些内容</slot>
 </div>
</template>

 data() {
                return {
                    games: ['打飞机', '起飞','戴森', '555'],
                }
         },

呈现效果:

数据在组件的自身, 但根据数据生成的结构需要组件的使用者来决定