slot插槽

插槽

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

分类：默认插槽、具名插槽、作用域插槽

 

默认插槽

父组件中（插槽使用者）：
  <Category>
     <!-- Category标签里的内容都会填充到子组件的<slot>位置 -->
     <div>html结构1</div>
  </Category>
子组件中（插槽）：
  <template>
      <div>
         <!-- 定义插槽 -->
         <slot>插槽默认内容...</slot>
      </div>
  </template>

 

具名插槽

父组件中（插槽使用者）：
  <Category>
      <!-- 指定使用的是那个插槽 -->
      <template slot="center">
        <div>html结构1</div>
      </template>

      <!--v-slot指令只能添加在template标签上，冒号后的就是插槽名称 -->
      <template v-slot:footer>
         <div>html结构2</div>
      </template>
  </Category>
子组件中（插槽）：
  <template>
      <div>
         <!-- 指定插槽的name，如果没有指定默认是default -->
         <slot name="center">插槽默认内容...</slot>
         <slot name="footer">插槽默认内容...</slot>
      </div>
  </template>

作用域插槽

理解：子组件（插槽）向父组件（插槽使用者）传送数据

父组件中（插槽使用者）：
  <Category>
    <template scope="scopeData">
      <ul>
        <!-- 接收到了插槽传递的数据 -->
        <li v-for="g in scopeData.games" :key="g">{{g}}</li>
      </ul>
    </template>
  </Category>
子组件中（插槽）：
 <template>
     <div>
        <!-- 向插槽使用者传递数据 -->
         <slot :games="games"></slot>
     </div>
 </template>

 <script>
     export default {
         name:'Category',
         props:['title'],
         //数据在子组件自身
         data() {
             return {
                 games:['红色警戒','穿越火线','劲舞团','超级玛丽']
             }
         },
     }
 </script>