理解vue中的插槽------slot與slot-scope-已整理

vue當中的插槽，指的便是slot，是組件當中的一塊HTML模板。該模板是否顯示，以及如何顯示由其父組件說了算。不過插槽顯示的位置是由子組件決定 ，你將slot寫在組件template的哪塊，父組件傳過來的模板未來就顯示在哪塊！

單個插槽

單個插槽是vue官方的叫法。你也能夠叫它默認插槽。另外由於該插槽不用設置name屬性，也能夠稱其爲匿名插槽。
先來看一個例子。
父組件：

 

<template>
    <div>
        <h3>我是一個父組件</h3>
        <!--顯示子組件，在child組件寫入一個HTML模板，該模板會替換子組件的slot-->
        <child>
            <div>
                有位很是漂亮的女同事，有天起晚了沒有時間化妝便急忙衝到公司。結果那天她被記曠工了……
            </div>
        </child>
    </div>
</template>

子組件：

 

<template>
    <div>
        <h5>我是子組件</h5>
        <slot></slot>
    </div>
</template>

在上面例子中，父組件在<child></child>裏面寫了html模板，子組件的slot會被該模板覆蓋掉！也能夠說子組件的插槽被使用了，最終會是下面這個樣子：

 

<div>
        <h3>我是一個父組件</h3>
        <div>
            <h5>我是子組件</h5>
            <div>
                有位很是漂亮的女同事，有天起晚了沒有時間化妝便急忙衝到公司。結果那天她被記曠工了……
            </div>
        </div>
 </div>

• 若是子組件有多個匿名插槽，均會被使用，咱們來將子組件修改下：

 

<template>
    <div>
        <h5>我是子組件</h5>
        <slot></slot>
        <slot></slot>
        <slot></slot>
    </div>
</template>

運行以後會變成這個樣子：

 

<div>
        <h3>我是一個父組件</h3>
        <div>
            <h5>我是子組件</h5>
            <div>
                有位很是漂亮的女同事，有天起晚了沒有時間化妝便急忙衝到公司。結果那天她被記曠工了……
            </div>
            <div>
                有位很是漂亮的女同事，有天起晚了沒有時間化妝便急忙衝到公司。結果那天她被記曠工了……
            </div>
            <div>
                有位很是漂亮的女同事，有天起晚了沒有時間化妝便急忙衝到公司。結果那天她被記曠工了……
            </div>
        </div>
 </div>

而後看一下console:

 

[Vue warn]: Duplicate presence of slot "default" found in the same render tree - this will likely cause render errors.

沒錯，飄紅了！爲何？由於Vue 2.0中不容許有重名的slot。若是你沒有代碼潔癖的話，如今就能夠下班閃人了！等着後面同事用你組件時來向你抱怨！若是要在不一樣位置渲染同一內容，你能夠用 prop 來傳遞。

具名插槽

匿名插槽是沒有名字的插槽。若是給插槽加上name屬性，咱們能夠將其稱爲具名插槽！
再來看個例子。
父組件：

 

<template>
    <div>
        <h3>我是一個父組件</h3>
        <!--顯示子組件-->
        <child>
            <div slot="zhang">老張</div>
            <div slot="wang">老王</div>
            <div>老李</div>
        </child>
    </div>
</template>

子組件：

 

<template>
    <div>
        <h5>我是子組件</h5>
        <!--具名插槽-->
        <slot name="zhang"></slot>
        <!--具名插槽-->  
        <slot name="wang"></slot>
        <!--匿名插槽-->
        <slot></slot>
    </div>
</template>

最終渲染的結果：

 

<div>
    <h3>我是一個父組件</h3>
    <!--顯示子組件-->
    <div>
        <h5>我是子組件</h5>
        <div>老張</div>
        <div>老王</div>
        <div>老李</div>
    </div>
</div>

能夠看出父組件經過模板上添加slot屬性與具名插槽的進行關聯。沒有slot屬性的html模板默認關聯匿名插槽。

做用域插槽

做用域插槽與前面兩種插槽相比，做用域插槽是要在slot上面綁定數據的。因此咱們也能夠稱做用域插槽爲帶數據插槽。
再來看一下以前兩種插槽的寫法：

 

<!--匿名插槽-->
<slot></slot>
<!--具名插槽-->
<slot name="up"></slot>

做用域插槽須要綁定上數據：

 

<template>
    <div>
        <h5>我是子組件</h5>
        <slot name="zhang" :data="sexArr"></slot>
    </div>
</template>

<script>
    export default {
        name: "child",
        data(){
            return {
                sexArr:["男","女"]
            }
        }
    }
</script>

父組件：

 

<template>
    <div>
        <h3>我是一個父組件</h3>
        <!--顯示子組件-->
        <child>
            <template slot="zhang" slot-scope="item">
                <div  v-for="sex in item.data">
                    <p>{{sex}}</p>
                </div>
            </template>
        </child>
    </div>
</template>

趕忙動手試試吧！

—————END—————