深入理解vue中的slot與slot-scope

https://segmentfault.com/a/1190000012996217

https://www.jianshu.com/p/e10baeff888d

 

自定義表頭: https://www.jianshu.com/p/1b2b0c536980

 

1. 匿名插槽

子組件

<slot></slot>

父組件

<child> XXXXX</child>

如果不寫名字就會直接在子組件匿名插槽渲染

 

2. 具名插槽

 

 

 

 

 

3. 作用域 插槽

子組件

<template>
  <div class="child">   <slot  :data="data"></slot>
  </div>
</template>

 

父組件

<!--第一次使用：用flex展示數據-->
    <child>
      <template slot-scope="user">   
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>

    </child>

    <!--第二次使用：用列表展示數據-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>

    </child>

    <!--第三次使用：直接顯示數據-->
    <child>
      <template slot-scope="user">
       {{user.data}}
      </template>

    </child>

    <!--第四次使用：不使用其提供的數據, 作用域插槽退變成匿名插槽-->
    <child>
      我就是模板
    </child>

 

 

 

總結: