這篇文章主要介紹了Vue具名插槽與作用域插槽怎么使用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue具名插槽與作用域插槽怎么使用文章都會(huì)有所收獲，下面我們一起來看看吧。

成都創(chuàng)新互聯(lián)公司專注于額敏網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供額敏營(yíng)銷型網(wǎng)站建設(shè)，額敏網(wǎng)站制作、額敏網(wǎng)頁設(shè)計(jì)、額敏網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造額敏網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供額敏網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

一、什么是插槽

1、插槽就是子組件中的提供給父組件使用的一個(gè)占位符，在子組件中用< slot>< /slot > 表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的< slot>< /slot >標(biāo)簽。（簡(jiǎn)單來說就是在子組件中挖個(gè)坑讓別人來跳）

2、在 2.6.0 版本之后，slot 以及 slot-scope 由 v-slot 統(tǒng)一替代。

3、插槽包括默認(rèn)插槽、具名插槽和作用域插槽

二、前期準(zhǔn)備

1、通過vue-cli創(chuàng)建好初始化項(xiàng)目
2、src下創(chuàng)建category.vue，同時(shí)在App.vue中引入

三、具名插槽的使用

1.子組件配置slot

在子組件中配置好props，接收從父組件App傳來的信息以及準(zhǔn)備兩個(gè)slot插槽：

//category.vue





#bck {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h4 {
  text-align: center;
  background-color: #bfa;
}

2.使用者App.vue配置數(shù)據(jù)

通過在子組件category定義的不同的name，可以讓數(shù)據(jù)在指定的位置顯示：

//App.vue





#app,
#game {
  display: flex;
  justify-content: space-around;
}
img {
  width: 100%;
}
video {
  width: 100%;
}

3.結(jié)果展示

4.具名插槽總結(jié)

1、在定義好slot插槽后，在需要展示的標(biāo)簽中加上 slot=“name”，即可在指定的位置上顯示需要顯示的內(nèi)容

2、同時(shí)需要注意的是，此方法的插槽數(shù)據(jù)源game是在App父組件中提供的，而不在子組件自身提供。為了減少冗余，可通過作用域插槽將數(shù)據(jù)存儲(chǔ)在定義slot插槽的組件自身

四、作用域插槽的使用

• 要求將要展示的數(shù)據(jù)放在定義插槽的組價(jià)中

• 父組件App.vue僅僅只是根據(jù)數(shù)據(jù)生成結(jié)構(gòu)，而數(shù)據(jù)是在定義slot的組件中提供的

1.子組件配置slot

在子組件中配置的props僅需要接收標(biāo)題頭。準(zhǔn)備兩個(gè)作用域插槽并攜帶要展示的數(shù)據(jù)：

//category.vue





#bck {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h4 {
  text-align: center;
  background-color: #bfa;
}

2.使用者接收數(shù)據(jù)并設(shè)置結(jié)構(gòu)

//App.vue
  
      
        
        

          {{ g }}
        
    
    
      
        
        
        {{f}}
        
      
    

3.結(jié)果展示

4.作用域插槽總結(jié)

1、可以解決在使用者組件中沒有要展示的數(shù)據(jù)，要調(diào)用別的組件的數(shù)據(jù)時(shí)可以使用。

2、定義slot的組件將自身的數(shù)據(jù)傳給使用者，使用者接收到數(shù)據(jù)后進(jìn)行結(jié)構(gòu)的配置。

3、使用者僅決定生成的結(jié)構(gòu)樣式，而數(shù)據(jù)是從被使用者（定義slot的組件）傳來的。

4、可以理解為slot就是父組件向子組件的指定位置插入特定的結(jié)構(gòu)。

關(guān)于“Vue具名插槽與作用域插槽怎么使用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue具名插槽與作用域插槽怎么使用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。