欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解

 更新時(shí)間:2023年08月03日 10:44:03   作者:林代碼er  
默認(rèn)插槽,具名插槽,作用域插槽是vue中常用的三個(gè)插槽,這篇文章主要為大家介紹了這三種插槽的使用與區(qū)別,感興趣的小伙伴可以了解一下

默認(rèn)插槽

App.vue :  在app.vue中使用MyCategory,里面包裹的結(jié)構(gòu)是不顯示的,要想在頁(yè)面中顯示,就需要用到插槽。在子組件MyCategory中定義

<template>
  <div class="container">
    <MyCategory title="美食" :listData="foods">
      <img src="https://img2.baidu.com/it/u=251961508,2775599777&fm=253&fmt=auto&app=120&f=JPEG?w=280&h=80" style="width: 200px;height: 200px" alt="">
    </MyCategory>
    <MyCategory title="游戲" :listData="games">
      <ul>
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
    </MyCategory>
    <MyCategory title="電影" :listData="films">
      <video controls src="1186200849-1-16.mp4" style="width: 100%" alt=""></video>
    </MyCategory>
  </div>
</template>
<script>
import MyCategory from "@/components/Category";
export default {
  name: 'App',
  components: {MyCategory},
  data(){
    return {
      foods:['火鍋','燒烤','小龍蝦','牛排'],
      games:['紅色警戒','穿越火線(xiàn)','qq飛車(chē)','和平精英'],
      films:['《怦然心動(dòng)》','《泰坦尼克號(hào)》','《魁拔》','《保你平安》']
    }
  }
}
</script>
<style>
  .container{
    display: flex;
    justify-content: space-around;
  }
</style>

 Category.vue :在想要放入結(jié)構(gòu)的位置,插入<solt></solt>默認(rèn)插槽,app.vue中在子標(biāo)簽中寫(xiě)的結(jié)構(gòu)才會(huì)被插入到插槽的位置。插槽標(biāo)簽里寫(xiě)的文本只有在插槽沒(méi)數(shù)據(jù)時(shí)候才會(huì)顯示。

<template>
  <div class="category">
    <h3>{{title}}分類(lèi)</h3>
<!--      <li v-for="(item,index) in listData" :key="index">{{ item }}</li>-->
      <slot>我是一些默認(rèn)值,當(dāng)使用者沒(méi)有傳遞具體結(jié)構(gòu)時(shí)候,我會(huì)出現(xiàn)</slot>
  </div>
</template>
<script>
export default {
  name: "MyCategory",
  props:['title','listData']
}
</script>
<style scoped>
  .category{
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
  h3{
    text-align: center;
    background-color: orange;
  }
  img{
    width: 100%;
  }
</style>

具名插槽

App.vue :  可以用多個(gè)插槽,插入在不同位置,需要在子組件中定義<solt name="xxx"></slot>加上name屬性名

<template>
  <div class="container">
    <MyCategory title="美食" :listData="foods">
      <img slot="center" src="https://img2.baidu.com/it/u=251961508,2775599777&fm=253&fmt=auto&app=120&f=JPEG?w=280&h=80" style="width: 200px;height: 200px" alt="">
      <a slot="footer" href="#">更多美食</a>
    </MyCategory>
    <MyCategory title="游戲" :listData="games">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
      <div slot="footer" class="footer">
        <a href="#">單機(jī)游戲</a>
        <a href="#">網(wǎng)絡(luò)游戲</a>
      </div>
    </MyCategory>
    <MyCategory title="電影" :listData="films">
      <video slot="center" controls src="1186200849-1-16.mp4" style="width: 100%" alt=""></video>
      <template slot="footer">
        <div class="footer">
          <a href="#">經(jīng)典</a>
          <a href="#">搞笑</a>
          <a href="#">動(dòng)作</a>
        </div>
        <h4>歡迎前來(lái)觀(guān)影</h4>
      </template>
    </MyCategory>
  </div>
</template>
<script>
import MyCategory from "@/components/Category";
export default {
  name: 'App',
  components: {MyCategory},
  data(){
    return {
      foods:['火鍋','燒烤','小龍蝦','牛排'],
      games:['紅色警戒','穿越火線(xiàn)','qq飛車(chē)','和平精英'],
      films:['《怦然心動(dòng)》','《泰坦尼克號(hào)》','《魁拔》','《保你平安》']
    }
  }
}
</script>
<style>
  .container,.footer{
    display: flex;
    justify-content: space-around;
  }
  h4{
    text-align: center;
  }
</style>

Category.vue :<slot name="xxx"></slot>就可以定義多個(gè)插槽,放在不同位置

<template>
  <div class="category">
    <h3>{{title}}分類(lèi)</h3>
<!--      <li v-for="(item,index) in listData" :key="index">{{ item }}</li>-->
      <slot name="center">我是一些默認(rèn)值,當(dāng)使用者沒(méi)有傳遞具體結(jié)構(gòu)時(shí)候,我會(huì)出現(xiàn)</slot>
      <slot name="footer">我是一些默認(rèn)值,當(dāng)使用者沒(méi)有傳遞具體結(jié)構(gòu)時(shí)候,我會(huì)出現(xiàn)</slot>
  </div>
</template>
<script>
export default {
  name: "MyCategory",
  props:['title','listData']
}
</script>
<style scoped>
  .category{
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
  h3{
    text-align: center;
    background-color: orange;
  }
  img{
    width: 100%;
  }
</style>

作用域插槽

App.vue:最實(shí)用的一種,可以實(shí)現(xiàn)子組件向父組件的逆向傳數(shù)據(jù)。 父組件中:<template scope="liner"></template> ,外面必須包著template標(biāo)簽,scope用來(lái)接收<slot>中傳過(guò)來(lái)的數(shù)據(jù),scope這里面的名子自己定義,取games數(shù)據(jù)時(shí)候用自己定義的scope中的名字來(lái)取xxx.games,如<slot>中定義了其他數(shù)據(jù),也可以xxx.msg,這樣取定義的其他數(shù)據(jù)。

<template>
  <div class="container">
    <MyCategory title="游戲">
      <template scope="liner">
        <ul>
          <li v-for="(g,index) in liner.games" :key="index">{{g}}</li>
        </ul>
      </template>
    </MyCategory>
    <MyCategory title="游戲">
      <template scope="liners">
        <ol style="color: #bd362f">
          <li v-for="(g,index) in liners.games" :key="index">{{g}}</li>
        </ol>
      </template>
    </MyCategory>
    <MyCategory title="游戲">
      <template scope="linerz">
          <h4 v-for="(g,index) in linerz.games" :key="index">{{g}}</h4>
      </template>
    </MyCategory>
  </div>
</template>
<script>
import MyCategory from "@/components/Category";
export default {
  name: 'App',
  components: {MyCategory},
}
</script>
<style>
  .container,.footer{
    display: flex;
    justify-content: space-around;
  }
  h4{
    text-align: center;
  }
</style>

Category.vue : 子組件中:<slot :games="games"></slot> 將data中的數(shù)據(jù)games綁定給games,給插槽傳遞了games數(shù)據(jù)

<template>
  <div class="category">
    <h3>{{title}}分類(lèi)</h3>
<!--    1.子組件中:<slot :games="games">我是默認(rèn)的一些內(nèi)容</slot>  將data中的數(shù)據(jù)games綁定給games,給插槽傳遞了games數(shù)據(jù)
        2.父組件中:<template scope="liner"></template> ,外面必須包著template標(biāo)簽,scope用來(lái)取slot中傳過(guò)來(lái)的數(shù)據(jù),scope這里面的名子自己定義,取games數(shù)據(jù)時(shí)候用自己定義的scope中的名字xxx.games
-->
    <slot :games="games">我是默認(rèn)的一些內(nèi)容</slot>
  </div>
</template>
<script>
export default {
  name: "MyCategory",
  props:['title'],
  data(){
    return {
      games:['紅色警戒','穿越火線(xiàn)','qq飛車(chē)','和平精英'],
    }
  }
}
</script>
<style scoped>
  .category{
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
  h3{
    text-align: center;
    background-color: orange;
  }
  img{
    width: 100%;
  }
</style>

以上就是vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解的詳細(xì)內(nèi)容,更多關(guān)于vue插槽的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • vue 中 get / delete 傳遞數(shù)組參數(shù)方法

    vue 中 get / delete 傳遞數(shù)組參數(shù)方法

    這篇文章主要介紹了vue 中 get / delete 傳遞數(shù)組參數(shù)方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-03-03
  • Vue中輸入框僅支持?jǐn)?shù)字輸入的四種方法

    Vue中輸入框僅支持?jǐn)?shù)字輸入的四種方法

    項(xiàng)目中需要用到大量的數(shù)字輸入框限制,為了可以以后能又更多的拓展性,下面這篇文章主要給大家介紹了關(guān)于Vue中輸入框僅支持?jǐn)?shù)字輸入的四種方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-08-08
  • vue?請(qǐng)求攔截器的配置方法詳解

    vue?請(qǐng)求攔截器的配置方法詳解

    這篇文章主要為大家介紹了vue?請(qǐng)求攔截器的配置方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-01-01
  • 在Vue中實(shí)現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)

    在Vue中實(shí)現(xiàn)Excel導(dǎo)出功能(數(shù)據(jù)導(dǎo)出)

    本文分享了如何在前端導(dǎo)出Excel文件,強(qiáng)調(diào)了前端導(dǎo)出的即時(shí)性、便捷性、靈活性和定制化優(yōu)勢(shì),以及減輕后端服務(wù)器負(fù)擔(dān)的特點(diǎn),詳細(xì)介紹了ExcelJS和FileSaver.js兩個(gè)工具庫(kù)的使用方法和主要功能,最后通過(guò)Vue實(shí)現(xiàn)了Excel的導(dǎo)出功能
    2024-10-10
  • Vue路由vue-router用法講解

    Vue路由vue-router用法講解

    這篇文章介紹了Vue路由vue-router的用法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-01-01
  • vue實(shí)現(xiàn)帶縮略圖的輪播圖效果

    vue實(shí)現(xiàn)帶縮略圖的輪播圖效果

    這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)帶縮略圖的輪播圖效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的可以參考下
    2024-02-02
  • vue.js仿hover效果的實(shí)現(xiàn)方法示例

    vue.js仿hover效果的實(shí)現(xiàn)方法示例

    這篇文章主要介紹了vue.js仿hover效果的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2019-01-01
  • vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟

    vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟

    這篇文章主要介紹了vue cli3 實(shí)現(xiàn)分環(huán)境打包的步驟,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-03-03
  • vue3中ace-editor的簡(jiǎn)單使用方法實(shí)例

    vue3中ace-editor的簡(jiǎn)單使用方法實(shí)例

    這篇文章主要給大家介紹了關(guān)于vue3中ace-editor簡(jiǎn)單使用的相關(guān)資料,ace-editor是一種代碼編輯器,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-10-10
  • vue3中setup的作用及使用場(chǎng)景分析

    vue3中setup的作用及使用場(chǎng)景分析

    本文主要介紹了Vue?3.0中的setup函數(shù),包括其概述、使用場(chǎng)景和具體用法,通過(guò)本文的介紹,我們可以看到,setup函數(shù)是用來(lái)將組件的狀態(tài)和行為進(jìn)行分離的一個(gè)重要工具,感興趣的朋友跟隨小編一起看看吧
    2024-11-11

最新評(píng)論