By Leaf

在學(xué)習(xí)的過(guò)程中遇到了Vue的slot元素，開(kāi)始不知道也不了解它的用途、用法，即然遇到了不懂的知識(shí)點(diǎn)我就學(xué)習(xí)一下。

一、理解vue中的slot

官網(wǎng)上對(duì)slot的理解是：

“Vue實(shí)現(xiàn)了一套內(nèi)容分發(fā)的API，這套API基于當(dāng)前的Web Components規(guī)范草案，將slot元素作為承載分發(fā)內(nèi)容的接口”。

??在參考了很多資料之后，以下總結(jié)一下我對(duì)slot的理解:
??slot的意思是插槽，Vue使用slot的作用是做內(nèi)容分發(fā)。所謂的內(nèi)容分發(fā)其實(shí)就是將父組件的內(nèi)容放到子組件指定的位置叫做內(nèi)容分發(fā)。
??在我們的電腦主板上也有各種各樣的插槽，有插CPU的，有插顯卡的，有插內(nèi)存的，有插硬盤(pán)的。我們可以理解slot為要占出當(dāng)前的位置，方便我們插入內(nèi)容?；蛘呖梢赃@樣理解：要去吃飯了，兒子先去占座，然后等他爸爸來(lái)了再一起吃。
??Vue的插槽分為匿名插槽（單個(gè)插槽/默認(rèn)插槽）、具名插槽、作用域插槽（帶數(shù)據(jù)的插槽）。

匿名插槽（單個(gè)插槽/默認(rèn)插槽）

• 無(wú)name屬性
• 在組件中只可以使用一次
• 父組件提供樣式和內(nèi)容
• <slot></slot>

  <!-- 父組件-->
<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>

最終呈現(xiàn)效果：

image.png

如果改變子組件中<slot>的位置：

<template>
    <div>
        <h2>child子組件部分</h2>
      <slot></slot>
    </div>
</template>

改變slot位置后的最終呈現(xiàn)效果如下：

image.png

只有在父組件的child下寫(xiě)了html模板，才能在子組件指定的位置放父組件的內(nèi)容。插槽最后顯示不顯示是看父組件有沒(méi)有在child下寫(xiě)模板，像下面一樣：

<child>
    html模板
</child>

具名插槽

• 有name屬性
• 在組件中可以使用N次
• 父組件通過(guò)html模板上的slot屬性關(guān)聯(lián)具名插槽
• 沒(méi)有slot屬性的html模板默認(rèn)關(guān)聯(lián)匿名模板
• 父組件提供樣式和內(nèi)容
• <slot name="###"></slot>

<!--父組件-->
<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>

最終呈現(xiàn)效果：

image.png

作用域插槽（帶數(shù)據(jù)的插槽）

• 父組件只提供樣式，子組件提供內(nèi)容
• 在slot上面綁定數(shù)據(jù)
• 子組件的值可以傳給父組件使用
• 父組件展示子組件數(shù)據(jù)有3種方式：flex顯示、列表顯示、直接顯示
• 使用slot-scope必須使用template
• scope返回的值是slot標(biāo)簽上返回的所有屬性值，并且是一個(gè)對(duì)象的形式保存起來(lái)
• slot有兩個(gè)屬性，一個(gè)row,另一個(gè)是index

<!--父組件-->
<template>
    <div class="father">
    <h3>這里是父組件</h3>
    <chlid>
      <!-- 第一次使用：用flex展示數(shù)據(jù) -->
        <template slot-scope="user">
            <div class="tmp1">
                <span v-for="(item,index) in user.data" :key="index">{{item}}</span>
            </div>
        </template>
        <!-- 第二次使用：用列表展示數(shù)據(jù) -->
        <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>

通過(guò)3種方式顯示數(shù)據(jù)的最終呈現(xiàn)效果分別如下：
1、flex顯示

image.png

2、列表顯示

image.png

image.png

這里我們所看到的數(shù)據(jù)“'小莊','CC','小張','小林','Leaf','Bob'”都是子組件data提供的數(shù)據(jù),父組件如果要使用這些數(shù)據(jù)必須要通過(guò)template模板結(jié)合slot-scope來(lái)呈現(xiàn)。

這里只是將自己學(xué)到的知識(shí)做一個(gè)總結(jié)，方便自己記憶和查閱，可能會(huì)有錯(cuò)，望大神指點(diǎn)！