【轉(zhuǎn)發(fā)】具名插槽簡寫和作用域插槽

10. [組件]具名插槽簡寫和作用域插槽

在父模板中確定插槽位置時菱涤，使用了v-slot:one這種方法旨袒，其實這個語法可以簡寫成#one撒璧。這時候的代碼就變成了下面的樣子喳张。

const app = Vue.createApp({
    template: ` 
    <h2>歡迎光臨紅浪漫-請選擇您的技師</h2>
    <hong-lang-man>
        <template v-slot:one><div>1.女賓一位，請上三樓岂丘。</div></template>
        <template v-slot:two><div>3.顧客選擇了全身SPA陵究。</div></template>
    </hong-lang-man>
`
})

修改后，可以打開瀏覽器元潘，進行預(yù)覽畔乙，發(fā)現(xiàn)也可以出現(xiàn)正確的結(jié)果君仆。學(xué)完具名插槽的簡寫方法后翩概，就可以學(xué)習(xí)這節(jié)的重點了作用域插槽。

作用域插槽-基礎(chǔ)代碼準(zhǔn)備

其實作用域插槽主要解決的問題是返咱，子組件中有插槽钥庇，也有變量，這些變量如何在父組件中進行使用咖摹。先來看這樣一個需求：編寫一個子組件评姨，里邊有大腳、劉英和曉紅三個名字變量，然后在子組件中用循環(huán)的形式輸出出來吐句。

在學(xué)習(xí)作用域插槽前胁后，我們先來完成這個基本需求，復(fù)制Demo9的代碼到Demo10.html頁面中嗦枢，然后留下最基礎(chǔ)的代碼攀芯。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo10</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        template: `  <h2>歡迎光臨紅浪漫-請選擇您的技師</h2>`
    })

    const vm = app.mount("#app")
</script>

上邊就是最基礎(chǔ)的Vue3代碼，不作過多解釋文虏，你可以直接復(fù)制這段代碼侣诺，開始你的學(xué)習(xí)。接下來我們要寫一個子組件氧秘，滿足剛才說的需求年鸳。

<script>
    const app = Vue.createApp({
        template: `  
            <h2>歡迎光臨紅浪漫-請選擇您的技師</h2>
            <list />
        `
    })
    app.component('List', {
        data() {
            return {
                list: ['大腳', '劉英', '曉紅']
            }
        },
        template: `
            <div>
                <div v-for="item in list">{{item}}</div>    
            </div>
        `
    })

    const vm = app.mount("#app")
</script>

上面的代碼，編寫了一個子組件list丸相，然后在list組件里搔确，聲明了一個list的數(shù)組數(shù)據(jù)項。數(shù)據(jù)項里有三個值大腳已添、劉英和曉紅妥箕。在模板中試用v-for的形式，進行循環(huán)更舞。

寫完這段代碼后畦幢，可以到瀏覽器里調(diào)試一下，看看可以正常運行嗎缆蝉？如果一切正常宇葱，應(yīng)該在頁面上顯示出循環(huán)的值了。

作用域插槽-具體講解

有了基礎(chǔ)代碼刊头，就可以學(xué)習(xí)作用域插槽的內(nèi)容了黍瞧。目前子組件里循環(huán)使用的是<div>標(biāo)簽，現(xiàn)在要求這個標(biāo)簽是父組件調(diào)用時確定原杂，也就是要使用插槽了印颤。（需要說明，這種情況在你寫組件時穿肄，經(jīng)常遇到年局，所以你要足夠的重視）。

我們剛開始的想法咸产，可以是先改造子組件矢否，增加slot插槽，增加插槽后的模板代碼如下脑溢。

template: `
    <div>
        <slot v-for="item in list"  />    
    </div>
`

然后在父組件里進行調(diào)用僵朗，調(diào)用方法如下。

const app = Vue.createApp({
    template: `  
        <h2>歡迎光臨紅浪漫-請選擇您的技師</h2>
        <list> <span></span> </list>
    `
})

這時候在瀏覽器中查看，打開控制臺验庙，可以看到DOM中顶吮，是有三個<span>標(biāo)簽的。說明DOM通過插槽的形式粪薛，傳遞過來了云矫。那接下來的問題，就是父組件如何使用子組件中的變量汗菜。

父組件想使用子組件插槽中的值让禀，可以使用:綁定的形式進行傳遞，比如寫成:item="item"陨界，具體的代碼可以寫成下面的樣子巡揍。

app.component('List', {
    data() {
        return {
            list: ['大腳', '劉英', '曉紅']
        }
    },
    template: `
        <div>
            <slot v-for="item in list" :item="item" />    
        </div>
    `

寫完后父組件中用v-slot="xxx"的形式接受，接收后就可以使用了菌瘪。

const app = Vue.createApp({
    template: `  
    <h2>歡迎光臨紅浪漫-請選擇您的技師</h2>
    <list v-slot="props"> 
        <span>{{props.item}}</span> 
    </list>
`
})

這時候你會發(fā)現(xiàn)列表是可以正常顯示的腮敌，也可以進行更換標(biāo)簽了，你可以試著把<span>標(biāo)簽換成<div>標(biāo)簽來嘗試一下俏扩。

注意這里的props是子組件傳遞過來的數(shù)據(jù)都是對象糜工，所以我們要加上.item才能使用÷嫉可以把代碼修改一下捌木。

<list v-slot="props">
    <div>{{props.item}}-{{props}}</div> 
</list>

輸出結(jié)果如下

大腳-{ "item": "大腳" }
劉英-{ "item": "劉英" }
曉紅-{ "item": "曉紅" }

簡化作用域插槽寫法

其實簡化的方法也非常簡單，只要使用解構(gòu)的形式嫉戚，這是ES6的一種寫法刨裆。如果對這部分，不熟悉彬檀，可以看看ES6關(guān)于解構(gòu)的語法知識帆啃。

const app = Vue.createApp({
    template: `  
        <h2>歡迎光臨紅浪漫-請選擇您的技師</h2>
        <list v-slot="{item}"> 
            <div>{{item}}</div> 
        </list>
        `
})

這種寫法雖然簡單，但是理解起來還是有些麻煩的窍帝。

總結(jié)一下：這節(jié)課我們主要學(xué)習(xí)了二個知識努潘，一個是具名插槽的簡寫方法，第二個是作用域插槽的使用和簡寫方法坤学。重點是作用域插槽疯坤，也正是因為有了作用域插槽，子組件才可以傳遞自身的數(shù)據(jù)項讓父組件進行使用拥峦。