快捷導(dǎo)航

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)是不顯示的，要想在頁面中顯示，就需要用到插槽。在子組件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:['紅色警戒','穿越火線','qq飛車','和平精英'],
      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)簽中寫的結(jié)構(gòu)才會(huì)被插入到插槽的位置。插槽標(biāo)簽里寫的文本只有在插槽沒數(shù)據(jù)時(shí)候才會(huì)顯示。

<template>
  <div class="category">
    <h3>{{title}}分類</h3>
<!--      <li v-for="(item,index) in listData" :key="index">{{ item }}</li>-->
      <slot>我是一些默認(rèn)值，當(dāng)使用者沒有傳遞具體結(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>歡迎前來觀影</h4>
      </template>
    </MyCategory>
  </div>
</template>
<script>
import MyCategory from "@/components/Category";
export default {
  name: 'App',
  components: {MyCategory},
  data(){
    return {
      foods:['火鍋','燒烤','小龍蝦','牛排'],
      games:['紅色警戒','穿越火線','qq飛車','和平精英'],
      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}}分類</h3>
<!--      <li v-for="(item,index) in listData" :key="index">{{ item }}</li>-->
      <slot name="center">我是一些默認(rèn)值，當(dāng)使用者沒有傳遞具體結(jié)構(gòu)時(shí)候，我會(huì)出現(xiàn)</slot>
      <slot name="footer">我是一些默認(rèn)值，當(dāng)使用者沒有傳遞具體結(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用來接收<slot>中傳過來的數(shù)據(jù)，scope這里面的名子自己定義，取games數(shù)據(jù)時(shí)候用自己定義的scope中的名字來取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}}分類</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用來取slot中傳過來的數(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:['紅色警戒','穿越火線','qq飛車','和平精英'],
    }
  }
}
</script>
<style scoped>
  .category{
    background-color: skyblue;
    width: 200px;
    height: 300px;
  }
  h3{
    text-align: center;
    background-color: orange;
  }
  img{
    width: 100%;
  }
</style>