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

Vue?中插槽的使用總結

 更新時間：2022年04月15日 11:13:49   作者：Errol_King  
這篇文章主要向大家分享的是Vue?中插槽的使用總結，包括內(nèi)容有默認插槽、具名插槽、作用域插槽等內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下

默認插槽

首先做一個頁面：

新增 Category.vue

<template>
<div class="category">
? <h3>{{title}}分類</h3>
? <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;
}
h3{
? 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:["勁舞團","QQ飛車","超級瑪麗","無人深空"],
? ? ? films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
? ? }
? }

}
</script>

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

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

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

<template>
<div class="category">
? <h3>{{title}}分類</h3>
? <slot></slot>
</div>
</template>

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

<style scoped>
.category{
? background-color: skyblue;
? width: 200px;
? height: 300px;
}
h3{
? 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:["勁舞團","QQ飛車","超級瑪麗","無人深空"],
? ? ? films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
? ? }
? }

}
</script>

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

具名插槽

修改 Category.vue

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

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

<style scoped>
.category{
? background-color: skyblue;
? width: 200px;
? height: 300px;
}
h3{
? 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"  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  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >單機游戲</a>
? ? ? ? <a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >網(wǎng)絡游戲</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  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >經(jīng)典</a>
? ? ? ? ? <a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >熱門</a>
? ? ? ? ? <a  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:["勁舞團","QQ飛車","超級瑪麗","無人深空"],
? ? ? films:["《教父》","《狩獵》","《禁閉島》","《聚焦》"]
? ? }
? }

}
</script>

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

作用域插槽

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

<template>
? <div class="category">
? ? <h3>{{ title }}分類</h3>
? ? <slot :games="games" :msg="hello"></slot>
? </div>
</template>

<script>
export default {
? name: "Category",
? props: ["title"],
? data() {
? ? return {
? ? ? games: ["勁舞團", "QQ飛車", "超級瑪麗", "無人深空"]
? ? }
? }
}
</script>

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

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

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

<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}">
? ? ? ? <h4 v-for="(g,index) in games" :key="index">{{ g }}</h4>
? ? ? ? <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>

插槽總結

  • 1.作用：讓父組件可以向子組件指定位置插入 html 結構，也是一種組件問通信的方式，適用于父組件==>子組件
  • 2.分類：默認插槽、具名插槽、作用域插槽
  • 3.使用方式：

默認插槽

父組件中：

<Category>
?? ?<div>html結構</div>
<Category>

子組件中：

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

具名插槽

父組件中：

<Category>
?? ?<template slot="center">
?? ??? ?<div>html結構1</div>
?? ?</template>
?? ?<tenplate v-slot:footer>
?? ??? ?<div>html結構2</div>
?? ?</template>
</Category>

子組件中：

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

作用域插槽

  • 1.理解：數(shù)據(jù)在組件的自身，但根據(jù)數(shù)據(jù)生成的結構需要組件的使用者來決定，(games 數(shù)據(jù)在 Category 組件中，但使用數(shù)據(jù)所遍歷出來的結構由 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}>
?? ?<!--生成的是h4標題-->
?? ?<h4 v-for="g in scopeData" :key="g">{{g}}</h4>
?? ?</template>
</Category>

子組件中：

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

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

注意：scope和slot-scope過時了，可以使用v-slot

到此這篇關于Vue 中插槽的使用總結的文章就介紹到這了,更多相關Vue 插槽使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • vue兄弟組件傳遞數(shù)據(jù)的實例

    vue兄弟組件傳遞數(shù)據(jù)的實例

    今天小編就為大家分享一篇vue兄弟組件傳遞數(shù)據(jù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • element table跨分頁多選及回顯的實現(xiàn)示例

    element table跨分頁多選及回顯的實現(xiàn)示例

    本文主要介紹了element table跨分頁多選及回顯的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-02-02
  • vue實現(xiàn)翻牌動畫

    vue實現(xiàn)翻牌動畫

    這篇文章主要為大家詳細介紹了vue實現(xiàn)翻牌動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決

    vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決

    這篇文章主要介紹了vue-resource post數(shù)據(jù)時碰到Django csrf問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-03-03
  • VUE中使用滾動組件-vueSeamlessScroll

    VUE中使用滾動組件-vueSeamlessScroll

    這篇文章主要介紹了VUE中使用滾動組件-vueSeamlessScroll,需要的朋友可以參考下
    2023-10-10
  • Vue實戰(zhàn)之vue登錄驗證的實現(xiàn)代碼

    Vue實戰(zhàn)之vue登錄驗證的實現(xiàn)代碼

    本篇文章主要介紹了Vue實戰(zhàn)之vue登錄的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • vue實現(xiàn)網(wǎng)易云音樂純界面

    vue實現(xiàn)網(wǎng)易云音樂純界面

    這篇文章主要為大家介紹了vue實現(xiàn)網(wǎng)易云音樂純界面過程詳解，附含詳細源碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-07-07
  • vue中Axios的封裝與API接口的管理詳解

    vue中Axios的封裝與API接口的管理詳解

    這篇文章主要給大家介紹了關于vue中Axios的封裝與API接口的管理的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2018-08-08
  • vue使用Vue.extend方法仿寫個loading加載中效果實例

    vue使用Vue.extend方法仿寫個loading加載中效果實例

    在vue中提供v-loading命令,用于div的loading加載,下面這篇文章主要給大家介紹了關于vue使用Vue.extend方法仿寫個loading加載中效果的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-06-06
  • 深度剖析?Vue3?在瀏覽器的運行原理

    深度剖析?Vue3?在瀏覽器的運行原理

    這篇文章主要介紹了深度剖析Vue3在瀏覽器的運行原理，文章通過圍繞主題展開相關詳細介紹，具有一定的參考價值，需要的小伙伴可以參考一下
    2022-09-09

最新評論