對Vue插槽slot的理解

By Leaf

在學習的過程中遇到了Vue的slot元素，開始不知道也不瞭解它的用途、用法，即然遇到了不懂的知識點我就學習一下。

一、理解vue中的slot

官網上對slot的理解是：

“Vue實現了一套內容分發的API，這套API基於當前的Web Components規範草案，將slot元素作為承載分發內容的介面”。

在參考了很多資料之後，以下總結一下我對slot的理解: slot的意思是插槽，Vue使用slot的作用是做內容分發。所謂的內容分發其實就是將父元件的內容放到子元件指定的位置叫做內容分發。在我們的電腦主機板上也有各種各樣的插槽，有插CPU的，有插顯示卡的，有插記憶體的，有插硬碟的。我們可以理解slot為要佔出當前的位置，方便我們插入內容。或者可以這樣理解：要去吃飯了，兒子先去佔座，然後等他爸爸來了再一起吃。 Vue的插槽分為匿名插槽（單個插槽/預設插槽）、具名插槽、作用域插槽（帶資料的插槽）。 ####匿名插槽（單個插槽/預設插槽）

無name屬性
在元件中只可以使用一次
父元件提供樣式和內容

  <!-- 父元件-->
<template>
    <div class="father">
    <h3>這裡是父元件</h3>
    <chlid>
        <div class="tmp1">
            <span>Leaf 1</span>
            <span>Leaf 2</span>
            <span>Leaf 3</span>
            <span>Leaf 4</span>
            <span>Leaf 5</span>
        </div>
    </child>
    </div>
</template>
<script>
import Child from '@/components/child'
export default {
    components:{
        child:child
    }
}
</script>
<style>
.tmp1 span{
    width: 50px;
    height: 50px;
    border:  1px solid black;
}
</style>
複製程式碼

<!--子元件-->
<template>
    <div>
        <slot></slot>
        <h2>child子元件部分</h2>
    </div>
</template>
複製程式碼

最終呈現效果：

如果改變子元件中的位置：

<template>
    <div>
        <h2>child子元件部分</h2>
      <slot></slot>
    </div>
</template>
複製程式碼

改變slot位置後的最終呈現效果如下：

只有在父元件的child下寫了html模板，才能在子元件指定的位置放父元件的內容。插槽最後顯示不顯示是看父元件有沒有在child下寫模板，像下面一樣：

<child>
    html模板
</child>
複製程式碼

####具名插槽

有name屬性
在元件中可以使用N次
父元件通過html模板上的slot屬性關聯具名插槽
沒有slot屬性的html模板預設關聯匿名模板
父元件提供樣式和內容

<!--父元件-->
<template>
    <div class="father">
    <h3>這裡是父元件</h3>
    <chlid>
        <div class="tmp1" slot="up">
            <span>Leaf 1</span>
            <span>Leaf 2</span>
            <span>Leaf 3</span>
            <span>Leaf 4</span>
            <span>Leaf 5</span>
        </div>
    <div class="tmp1" slot="down">
            <span>Leaf 6</span>
            <span>Leaf 7</span>
            <span>Leaf 8</span>
            <span>Leaf 9</span>
            <span>Leaf 10</span>
        </div>
    </child>
    </div>
</template>
<script>
import Child from '@/components/child'
export default {
    components:{
        child:child
    }
}
</script>
<style>
.tmp1 span{
    width: 50px;
    height: 50px;
    border:  1px solid black;
}
</style>
複製程式碼

<!--子元件-->
<template>
    <div>
        <slot name="up"></slot>
        <h2>chlid子元件部分</h2>
        <slot name="down"></slot>
    </div>
</template>
複製程式碼

最終呈現效果：

####作用域插槽（帶資料的插槽）

父元件只提供樣式，子元件提供內容
在slot上面繫結資料
子元件的值可以傳給父元件使用
父元件展示子元件資料有3種方式：flex顯示、列表顯示、直接顯示
使用slot-scope必須使用template
scope返回的值是slot標籤上返回的所有屬性值，並且是一個物件的形式儲存起來
slot有兩個屬性，一個row,另一個是index

<!--父元件-->
<template>
    <div class="father">
    <h3>這裡是父元件</h3>
    <chlid>
      <!-- 第一次使用：用flex展示資料 -->
        <template slot-scope="user">
            <div class="tmp1">
                <span v-for="(item,index) in user.data" :key="index">{{item}}</span>
            </div>
        </template>
        <!-- 第二次使用：用列表展示資料 -->
        <template slot-scope="user">
            <ul>
                <li v-for="(item,index) in user.data" :key="index">{{item}}</li>
            </ul>
        </template>
        <!-- 第三次使用：直接顯示 -->
        <template slot-scope="user">
          {{user.data}}
        </template>
    </child>
    </div>
</template>
<script>
import Child from '@/components/child'
export default {
    components:{
        child:child
    }
}
</script>
<style>
.tmp1 span{
    width: 50px;
    height: 50px;
    border:  1px solid black;
}
</style>
複製程式碼

<!--子元件-->
<template>
    <div>
        <h2>chlid子元件部分</h2>
        <slot :data="data"></slot>
    </div>
</template>
<script>
export default {
  props: ["message"],
  data () {
      return {
          data: [''小莊','CC','小張','小林','Leaf','Bob']
      }
  }
}
</script>
複製程式碼

通過3種方式顯示資料的最終呈現效果分別如下： 1、flex顯示

2、列表顯示

3、直接顯示

這裡我們所看到的資料“'小莊','CC','小張','小林','Leaf','Bob'”都是子元件data提供的資料,父元件如果要使用這些資料必須要通過template模板結合slot-scope來呈現。

這裡只是將自己學到的知識做一個總結，方便自己記憶和查閱，可能會有錯，望大神指點！

對Vue插槽slot的理解

一、理解vue中的slot

相關文章