vue的slot--插槽

插槽

1. 插槽的作用

在组件模板中定义slot插槽，允许在使用组件时，在组件标签内部定义要渲染在插槽位置的内容

2. 插槽的分类

• 匿名插槽
• 具名插槽
• 作用域插槽

3. 匿名插槽

父组件template

<div id="app">
    <!-- 子组件panel: 正在进行 -->
    <panel :list="pending">
        <h1>正在进行</h1>
    </panel>
    <!-- 子组件panel: 已经完成 -->
    <panel :list="resolve">
        <template>
            <h4>已经完成</h4>
        </template>
    </panel>
</div>

子组件panel的template

<div class="box">
    <!-- 匿名插槽-->
    <slot></slot>
    <ul>
        <li v-for="(item,index) in list">{{item}}</li>
    </ul>
</div>

4. 具名插槽

父组件template

<div id="app">
    <!-- 正在进行 -->
    <panel :list="pending">
        <template v-slot:header>
            header的内容
        </template>
        <template v-slot:footer>
            footer的内容
        </template>
        
        <!-- 任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。-->
        <h1>我是默认的</h1>
    </panel>
    
</div>

子组件template

<div class="box">
    <!-- 有名字的插槽-->
    <slot name="header"></slot>
    <hr>
    <!-- 默认插槽-->
    <slot></slot>
    <ul>
        <li v-for="(item,index) in list">{{item}}</li>
    </ul>
    <!-- 有名字的插槽-->
    <slot name="footer"></slot>
</div>

5. 作用域插槽

作用域插槽： 可以把组件内部数据传递给对应模板的插槽

作用域插槽的作用： 在插槽对应的模板中可访问组件内部的数据

示例：

<slot name="header" :msg="msg" :num="num"></slot>

模板接收数据：

<template v-slot:header="data">

 *** data是所有数据组成的集合

• 案例

  父组件的template

      <div id="app">
          <!-- 正在进行 -->
          <panel :list="pending">
              <template v-slot:header="data">
                  header的内容---{{data.msg}}-----{{data.num}}
              </template>
              <template v-slot:footer>
                  footer的内容
              </template>
              <h1>我是默认的</h1>
          </panel>
          
      </div>
  

  子组件

  Vue.component("panel", {
      props: {
          list: Array
      },
      data(){
          return {
              msg: '我是子组件的数据',
              num: 9
          }
      },
      template: `
          <div class="box">
              <slot name="header" :msg="msg" :num="num"></slot>
              <hr>
              <slot></slot>
              <ul>
                  <li v-for="(item,index) in list">{{item}}</li>
              </ul>
              <slot name="footer"></slot>
          </div>
      `
  })