溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Vue中的插槽怎么使用

發(fā)布時(shí)間：2022-04-15 13:38:58 來(lái)源：億速云 閱讀：117 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇“Vue中的插槽怎么使用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“Vue中的插槽怎么使用”文章吧。

默認(rèn)插槽

首先做一個(gè)頁(yè)面：

Vue中的插槽怎么使用

新增 Category.vue

<template>
<div class="category">
  <h4>{{title}}分類(lèi)</h4>
  <ul>
    <li v-for="(item,index) in listData" :key="index">{{item}}</li>
  </ul>
</div>
</template>

<script>
export default {
  name: "Category",
  props:["title","listData"]
}
</script>

<style scoped>
.category{
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h4{
  text-align: center;
  background-color: orange;
}
</style>

App.vue 中使用

<template>
  <div class="container">
    <Category title="美食" :listData="foods"/>
    <Category title="游戲" :listData="games"/>
    <Category title="電影" :listData="films"/>
  </div>
</template>

<script>
import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
  data(){
    return{
      foods:["火鍋","燒烤","小龍蝦","牛排"],
      games:["勁舞團(tuán)","QQ飛車(chē)","超級(jí)瑪麗","無(wú)人深空"],
      films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
    }
  }

}
</script>

<style>
.container {
  display: flex;
  justify-content: space-around;
}
</style>

現(xiàn)在修改需求，每個(gè)分類(lèi)都要展示不同的內(nèi)容：

Vue中的插槽怎么使用

這里就用到了插槽，修改 Category.vue

<template>
<div class="category">
  <h4>{{title}}分類(lèi)</h4>
  <slot></slot>
</div>
</template>

<script>
export default {
  name: "Category",
  props:["title"]
}
</script>

<style scoped>
.category{
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h4{
  text-align: center;
  background-color: orange;
}
</style>

修改 App.vue

<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <img src="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/>
    </Category>
    <Category title="游戲" :listData="games">
      <ul>
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
    </Category>
    <Category title="電影">
      <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
  data(){
    return{
      foods:["火鍋","燒烤","小龍蝦","牛排"],
      games:["勁舞團(tuán)","QQ飛車(chē)","超級(jí)瑪麗","無(wú)人深空"],
      films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
    }
  }

}
</script>

<style>
.container {
  display: flex;
  justify-content: space-around;
}
img,video{
  width: 100%;
}
</style>

具名插槽

修改 Category.vue

<template>
<div class="category">
  <h4>{{title}}分類(lèi)</h4>
  <slot name="center">這是一些默認(rèn)值，沒(méi)有內(nèi)容時(shí)展示</slot>
  <slot name="footer">這是一些默認(rèn)值，沒(méi)有內(nèi)容時(shí)展示</slot>
</div>
</template>

<script>
export default {
  name: "Category",
  props:["title"]
}
</script>

<style scoped>
.category{
  background-color: skyblue;
  width: 200px;
  height: 300px;
}
h4{
  text-align: center;
  background-color: orange;
}
</style>

修改 App.vue

<template>
  <div class="container">
    <Category title="美食" :listData="foods">
      <img slot="center" src="https://img2.baidu.com/it/u=2073611229,1921777437&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675"/>
      <a slot="footer" href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >更多美食</a>
    </Category>
    <Category title="游戲" :listData="games">
      <ul slot="center">
        <li v-for="(g,index) in games" :key="index">{{g}}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >單機(jī)游戲</a>
        <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >網(wǎng)絡(luò)游戲</a>
      </div>
    </Category>
    <Category title="電影">
      <video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
      <!--v-slot 只有template能用-->
      <template v-slot:footer>
        <div class="foot" slot="footer">
          <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >經(jīng)典</a>
          <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >熱門(mén)</a>
          <a href="https://www.baidu.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >推薦</a>
        </div>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
  data(){
    return{
      foods:["火鍋","燒烤","小龍蝦","牛排"],
      games:["勁舞團(tuán)","QQ飛車(chē)","超級(jí)瑪麗","無(wú)人深空"],
      films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
    }
  }

}
</script>

<style>
.container,.foot {
  display: flex;
  justify-content: space-around;
}
img,video{
  width: 100%;
}
</style>

作用域插槽

Vue中的插槽怎么使用

如果數(shù)據(jù)在 Category 中，但需要展示不同的形式，我們可以通過(guò)插槽傳值，類(lèi)似于我們從父組件向子組件傳值：

<template>
  <div class="category">
    <h4>{{ title }}分類(lèi)</h4>
    <slot :games="games" :msg="hello"></slot>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: ["title"],
  data() {
    return {
      games: ["勁舞團(tuán)", "QQ飛車(chē)", "超級(jí)瑪麗", "無(wú)人深空"]
    }
  }
}
</script>

<style scoped>
.category {
  background-color: skyblue;
  width: 200px;
  height: 300px;
}

h4 {
  text-align: center;
  background-color: orange;
}
</style>

App 中在子組件中使用 <template> 包裹要展示的內(nèi)容，標(biāo)簽中可以使用scope接收傳過(guò)來(lái)的值

<template>
  <div class="container">
    <Category title="游戲">
      <template v-slot="receiveValue">
        <ul>
          <li v-for="(g,index) in receiveValue.games" :key="index">{{ g }}</li>
        </ul>
        <a>{{ receiveValue.msg }}</a>
      </template>
    </Category>

    <Category title="游戲">
      <template v-slot="{games,msg}">
        <ol>
          <li v-for="(g,index) in games" :key="index">{{ g }}</li>
        </ol>
        <a>{{ msg }}</a>
      </template>
    </Category>

    <Category title="游戲">
      <template v-slot="{games,msg}">
        <h5 v-for="(g,index) in games" :key="index">{{ g }}</h5>
        <a>{{ msg }}</a>
      </template>
    </Category>

  </div>
</template>

<script>
import Category from "@/components/Category";

export default {
  name: 'App',
  components: {Category},
}
</script>

<style>
.container, .foot {
  display: flex;
  justify-content: space-around;
}

img, video {
  width: 100%;
}
</style>

插槽總結(jié)

  • 1.作用：讓父組件可以向子組件指定位置插入 html 結(jié)構(gòu)，也是一種組件問(wèn)通信的方式，適用于父組件==>子組件

  • 2.分類(lèi)：默認(rèn)插槽、具名插槽、作用域插槽

  • 3.使用方式：

默認(rèn)插槽

父組件中：

<Category>
    <div>html結(jié)構(gòu)</div>
<Category>

子組件中：

<template>
    <div>
    <!--定義插槽-->
    <slot>插槽默認(rèn)內(nèi)容...</slot>
    </div>
</templdte>

具名插槽

父組件中：

<Category>
    <template slot="center">
        <div>html結(jié)構(gòu)1</div>
    </template>
    <tenplate v-slot:footer>
        <div>html結(jié)構(gòu)2</div>
    </template>
</Category>

子組件中：

<template>
    <div>
    <1--定義插槽-->
    <slot name="center">插槽默認(rèn)內(nèi)容...</slot>
    <slot name="footer”>插槽默認(rèn)內(nèi)容...</slot>
    </div>
</template>

作用域插槽

  • 1.理解：數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結(jié)構(gòu)需要組件的使用者來(lái)決定，(games 數(shù)據(jù)在 Category 組件中，但使用數(shù)據(jù)所遍歷出來(lái)的結(jié)構(gòu)由 App 組件決定)

  • 2.具體編碼：

父組件中：

<category>
    <template v-slot="scopeData"
    <!--生成的是ul列表-->
    <ul>
        <li v-for="g in scopeDsta.games" : key="g">{g}</li>
    </ul>
    </template>
</Category>

<Category>
    <template v-slot={scopeData}>
    <!--生成的是h5標(biāo)題-->
    <h5 v-for="g in scopeData" :key="g">{{g}}</h5>
    </template>
</Category>

子組件中：

<template>
    <div>
        <slot :games="games"></slot>
    </div>
</template>

<script>
export default{
    name: "Category ',
    props: ["title"],
    //數(shù)據(jù)在子組件自身
    data() {
        return{
            games:['紅色警戒,穿越火線',"勁舞團(tuán)",超級(jí)瑪麗"]
        }
    }
}</script>

注意：scope和slot-scope過(guò)時(shí)了，可以使用v-slot

以上就是關(guān)于“Vue中的插槽怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手