Element-ui 的 slot 關系理解

摘要: 在看一些前端用例時,看到 slot-scope 屬性,早在了解學習的時候,對 slot 還是可以理解的,結果碰上 slot-scope 感覺理解方式就不對了,所以重新查閱學習了一下

首先 slot: 父組件寫在子組件標簽內的內容,替換了子組件中slot標簽

//father
<template>
  <div class="father">
    <child>
      <div>標簽內的內容</div>      //寫在子組件標簽內,會替換子組件的slot標簽.....這里可以是純文字,可以是一個小標簽,也可以是一個<template>
    </child>
  </div>
<template>

//child
<template>
  <div class="child">
    <slot></slot>      //插槽,子組件預留的空位,由父組件提供內容        
  </div>
<template>

//合成后
<div class="father">  //父組件
  <div class="child">  //子組件
    <div>標簽內的內容</div>   //替換了slot
  </div>
</div>

上述內容就是插槽,一種子組件預留空間的方法.也可以准備多個插槽:

//指定要插入的插槽
<div slot="slot1">標簽內的內容1</div>
<div slot="slot2">標簽內的內容2</div>

//為插槽命名
<slot name="slot1"></slot>
<slot name="slot2"></slot>

slot-scope 相對復雜一點,它是用於數據傳遞的,意義上就像props

先提供一個場景說明:

老師A需要做一個調查統計分析的報告(A:父組件,報告:展示部分)

留了一頁空白讓學生B去做表格和統計了(B:子組件,表格統計:展示部分)

要求,在表格最后一行留空,A要寫分析結論(留空:插槽,分析結論:標簽內的內容)

同時,A還要B提供統計結果才能寫結論(統計結果:子組件返回的數據)

//父組件
<template>
  <div class="father">  　　　　　　　　//老師A 報告
    <child>               　　　　　　 //學生B 表格
        <div slot-scope="response" > //老師A 結論
          統計結果:{{response.data}}
        </div>
    </child>
  </div>
</template>

//子組件
<template>
  <div class="child">  　　　　　　　 //學生B 表格
     <slot :data="result"></slot>   //老師A 結論
  </div>
</template>

解釋;把slot想象成孫組件,子組件可以任意傳數據給孫組件

這里孫組件不用再一一寫props,因為子組件slot會把后面所有數據打包成一個對象給孫組件,孫組件用slot-scope為這整個對象起名

<div slot-scope="xxx">
{{xxx.info.name}}的學校是{{xxx.school.name}}
</div>

<slot :info="person" :school="school"></slot>