技術標籤：VUE頁面開發

一、介紹：slot可以理解為佔位符，在子元件中給父元件站位。

二、舉例說明：

1、沒有插槽：

（1）父元件：

<template>
 <div>
     我是父元件
    <childOne>
      <p style="color:red">我是父元件插槽內容</p>
    </childOne>
 </div>
</template>
<script>
import childOne from './children/child-one'
export default {
    components: {childOne },
}
</script>
 

（2）子元件：

<template>
 <div class="childOne">
 <div>我是childOne元件</div>
 </div>
</template>

（3）效果：父元件插入的內容並沒有起作用

2、加上slot：

（1）子元件加上插槽：

<template>
 <div class="childOne">
    <div>我是childOne元件</div>
    <slot></slot>
 </div>
</template>
 

（2）效果：父元件的插入內容可以顯示

比如改變slot的位置：

<template>
 <div class="childOne">
     <slot></slot>
    <div>我是childOne元件</div>
 </div>
</template>

3、具名插槽：

（2）子元件：在子元件中定義了三個slot標籤，其中有兩個分別添加了name屬性header和footer

<template>
  <div>
     <div>我是childOne元件</div>
     <slot name="header"></slot>
     <slot></slot>
     <slot name="footer"></slot>
  </div>
</template>
 

（2）父元件：在父元件中使用template並寫入對應的slot值來指定該內容在子元件中現實的位置（當然也不用必須寫到template），沒有對應值的其他內容會被放到子元件中沒有新增name屬性的slot中

<template>
 <div>
    我是父元件
  <childOne>
    <p>啦啦啦，啦啦啦，我是賣報的小行家</p>
    <template slot="header">
       <p>我是name為header的slot</p>
    </template>
    <p slot="footer">我是name為footer的slot</p>
  </childOne>
 </div>
</template>

（3）效果：

4、插槽的預設內容：可以在子元件的slot標籤中寫入內容，當父元件沒有寫入內容時會顯示子元件的預設內容，當父元件寫入內容時，會替換子元件的預設內容。

（1）子元件slot中寫內容，父元件不寫：

<template>
 <div>
    我是父元件
  <childOne>
  </childOne>
 </div>
</template>

<template>
 <div >
   <slot>我是子元件的插槽</slot>
 </div>
</template>

（2）子元件slot中寫內容，父元件也寫：

<template>
 <div>
    我是父元件
  <childOne>
    我是父元件插槽內容
  </childOne>
 </div>
</template>
<script>
import childOne from './children/child-one'
export default {
    components: {childOne },
}
</script>

<template>
 <div >
   <slot>我是子元件的插槽</slot>
 </div>
</template>

5、slot父元件傳參給子元件：直接繫結

（1）父元件：

<template>
 <div>
    我是父元件
  <childOne>
    <p>{{name}}</p>
  </childOne>
 </div>
</template>
<script>
import childOne from './children/child-one'
export default {
    data(){return {name:'張三'}},
    components: {childOne }
}
</script>

（2）子元件：

<template>
 <div >
   <slot></slot>
 </div>
</template>

（3）效果：

6、slot子元件傳參給父元件：

（1）父元件：在父元件上使用slot-scope屬性

<template>
 <div>
   我是父元件
   <childOne>
      <template slot-scope="user">
        <div v-for="item in user" :key="item">
           {{item}}
       </div>
      </template>
   </childOne>
 </div>
</template>
<script>
import childOne from './children/child-one'
export default {
    data(){return {name:'張三'}},
    components: {childOne }
}
</script>

（2）子元件：在子元件的slot標籤上繫結需要的值：

<template>
 <div>
   我是子元件
   <slot :data="user"></slot>
 </div>
</template>

<script>
export default {
 name: 'slotthree',
 data () {
 return {
  user: [
  {name: '張三', sex: '女'},
  {name: '李四', sex: '男'},
  {name: '王五', sex: '男'}
  ]
 }
 }
}
</script>

（3）效果：

三、Element中帶插槽的常用元件：元件帶插槽，則在引用的時候可以自定義內容

1、el-table：el-table-column帶插槽：

 <el-table-column label="使用者名稱" min-width="22" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>

2、el-calendar：日曆單元格帶插槽：

<el-calendar>
  <!-- 這裡使用的是 2.5 slot 語法，對於新專案請使用 2.6 slot 語法-->
  <template
    slot="dateCell"
    slot-scope="{date, data}">
    <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
    </p>
  </template>
</el-calendar>

3、el-tab：tab標籤插槽，可以自定義tab