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

Vue中插槽Slot基本使用與具名插槽詳解

 更新時間:2022年10月29日 10:51:05   作者:東非不開森  
有時候我們希望在指定的位置輸出我們的子元素,這時候具名插槽就排上了用場,這篇文章主要給大家介紹了關(guān)于Vue中插槽Slot基本使用與具名插槽的相關(guān)資料,需要的朋友可以參考下

一、插槽Slot

1.1.插槽Slot的作用

??
初識插槽:

  • 為了讓這個組件具備更強的通用性,我們不能將組件中的內(nèi)容限制為固定的div、span等等這些元素;
  • 比如某種情況下我們使用組件,希望組件顯示的是一個按鈕,某種情況下我們使用組件希望顯示的是一張圖片;
  • 我們應(yīng)該讓使用者可以決定某一塊區(qū)域到底存放什么內(nèi)容和元素;
  • 所以就可以使用插槽來解決這個問題

換句話說就是,我們要是想在一個組件標(biāo)簽中添加新的內(nèi)容,那么我們就需要在該組件內(nèi)聲明一個插槽,不然,添加的新內(nèi)容不會被渲染

??
使用插槽:

  • 用slot元素作為插槽
  • 插入什么內(nèi)容是由父元素如何使用,比如父組件插入按鈕、插入圖片,就會顯示按鈕圖片,如果沒有,那就不顯示或許顯示插槽默認(rèn)的內(nèi)容
  • 有時候我們希望在使用插槽時,如果沒有插入對應(yīng)的內(nèi)容,那么我們需要顯示一個默認(rèn)的內(nèi)容:
  • 當(dāng)然這個默認(rèn)的內(nèi)容只會在沒有提供插入的內(nèi)容時,才會顯示;
  • 我們可以在slot標(biāo)簽中設(shè)置一個默認(rèn)內(nèi)容

 使用插槽案例:

父組件App.vue

<template>
    <div class="app">
        <!-- 內(nèi)容是button -->
        <show-message title="哈哈哈">
            <button>我是按鈕元素</button>
        </show-message>
        <!-- 內(nèi)容是超鏈接 -->
        <show-message>
            <a href="#" rel="external nofollow"  rel="external nofollow" >百度一下</a>
        </show-message>

        <!-- 沒有值傳遞 -->
        <show-message></show-message>
    </div>
</template>

子組件showMessage.vue

<template>
    <h2>{{title}}</h2>
    <div class="content">
        <slot>
            <p>我是默認(rèn)值</p>
        </slot>
    </div>
</template>

效果圖:

我們可以發(fā)現(xiàn),在組件showMessage里面,我們給它一個插槽,

  • 在App.vue, 我們給showMessage三次復(fù)用,
  • 一次為按鈕,一次為a標(biāo)簽,一次什么也不加
  • 而產(chǎn)生的結(jié)果就是,一個為按鈕,一個為a鏈接,一個為插槽默認(rèn)的p標(biāo)簽

我們可以看出來

  • 插槽部分想要展示什么內(nèi)容由父元素進行決定, 如果插槽沒有 插入東西, 那么這個插槽會被忽略
  • 也就是說,用了插槽,父元素如果用按鈕,子元素就會顯示按鈕,父元素用標(biāo)題,子元素就會顯示標(biāo)題
  • 如果子組件沒有插槽,那就顯示不出來了

1.2.具名插槽Slot

??

希望達到的效果是插槽對應(yīng)內(nèi)容的顯示,這個時候我們就可以使用具名插槽:

  • 具名插槽顧名思義就是給插槽起一個名字,slot 元素有一個特殊的 attribute:name;
  • 一個不帶 name 的slot,會帶有隱含的名字 default;
  • 也就是說, 我們可以給每個插槽都取上一個名字,
  • 在父組件中使用的時候, 需要包裹一個template標(biāo)簽, 并在template中使用
  • v-solt: 插槽名 具名插槽縮寫#

父組件App.vue

<template>
    <nav-bar>
        <template v-slot:left>
            <button>返回</button>
        </template>

        <template v-slot:center>
            <span>內(nèi)容</span>
        </template>

        <template v-slot:right>
            <a href="#" rel="external nofollow"  rel="external nofollow" >登錄</a>
        </template>
    </nav-bar>
</template>

子組件
NavBar.vue

(顏色啥的css里面自己可以調(diào),這里就不放了)

<template>
    <div class="nav-bar">
        <div class="left">
            <slot name="left">left</slot>
        </div>
        <div class="center">
            <slot name="center">center</slot>
        </div>
        <div class="right">
            <slot name="right">right</slot>
        </div>
    </div>
</template>

效果圖:

達到的效果是插槽對應(yīng)的顯示

所以這就是具名插槽的作用

??
動態(tài)插槽名

通過 v-slot:[dynamicSlotName]方式動態(tài)綁定一個名稱;

Ps:作用域插槽

作用域插槽

作用域插槽的主要作用是在書寫插槽內(nèi)容時可以獲取到插槽作用域的值。

//組件調(diào)用start
 <ul>
   <slot-demo :userObj="userObj">
	   <template v-slot:footer="message">
	       <div>{{message.userAge}}</div>
	       <div>{{message.userName}}</div>
	       //這里用的message是寫組件時在slot標(biāo)簽上定義屬性的映射。
	   </template>
   </slot-demo>
 </ul>
 
   data() {
	   return {
		      userObj: {
		          age: 3,
		          name: '張三',
		      },
	    }
  },
//組件調(diào)用end
 //書寫組件時start
<template>
    <li>
    	//這里的userObj是組件調(diào)用是傳下來的prop
        <slot name='footer' :userAge="userObj.age" :userName="userObj.name" >
        </slot>
    </li>
</template>

props: {
   userObj: Object,
},
 //書寫組件時end

注意事項:

這里需要注意的是message是所有你綁定屬性的集合,也就是你寫的::userAge=“userObj.age” 會當(dāng)做message的屬性來實現(xiàn)。當(dāng)然這里message可以換做其它的名稱。

總結(jié)

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

相關(guān)文章

  • Vue 請求傳公共參數(shù)的操作

    Vue 請求傳公共參數(shù)的操作

    這篇文章主要介紹了Vue 請求傳公共參數(shù)的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 詳解如何在Vue中快速實現(xiàn)數(shù)據(jù)可視化大屏展示

    詳解如何在Vue中快速實現(xiàn)數(shù)據(jù)可視化大屏展示

    在現(xiàn)代數(shù)據(jù)驅(qū)動的應(yīng)用程序中,數(shù)據(jù)可視化大屏已經(jīng)成為了非常重要的一環(huán),通過對海量數(shù)據(jù)進行可視化展示,可以幫助用戶更好地理解和分析數(shù)據(jù),從而做出更加明智的決策,在Vue中進行數(shù)據(jù)可視化大屏展示也變得越來越流行,本文將介紹如何在Vue中快速實現(xiàn)數(shù)據(jù)可視化大屏展示
    2023-10-10
  • vue中this.$refs有值,但無法獲取ref的值問題及解決

    vue中this.$refs有值,但無法獲取ref的值問題及解決

    這篇文章主要介紹了vue中this.$refs有值,但無法獲取ref的值問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vue3?Transition組件給頁面切換并加上動畫效果

    Vue3?Transition組件給頁面切換并加上動畫效果

    這篇文章主要給大家介紹了關(guān)于Vue3?Transition組件給頁面切換并加上動畫效果的相關(guān)資料,vue的過渡動畫主要是transition標(biāo)簽的使用,配合css動畫實現(xiàn)的,需要的朋友可以參考下
    2023-06-06
  • vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解

    vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用詳解

    這篇文章主要介紹了vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結(jié)合使用,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue項目打包之后接口出現(xiàn)錯誤的問題及解決

    vue項目打包之后接口出現(xiàn)錯誤的問題及解決

    這篇文章主要介紹了vue項目打包之后接口出現(xiàn)錯誤的問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 關(guān)于Vue?監(jiān)控數(shù)組的問題

    關(guān)于Vue?監(jiān)控數(shù)組的問題

    這篇文章主要介紹了Vue?監(jiān)控數(shù)組的示例,主要包括Vue?是如何追蹤數(shù)據(jù)發(fā)生變化,Vue?如何更新數(shù)組以及為什么有些數(shù)組的數(shù)據(jù)變更不能被?Vue?監(jiān)測到,對vue監(jiān)控數(shù)組知識是面試比較常見的問題,感興趣的朋友一起看看吧
    2022-05-05
  • 解讀element-ui使用el-upload,before-upload函數(shù)不好使的問題

    解讀element-ui使用el-upload,before-upload函數(shù)不好使的問題

    這篇文章主要介紹了解讀element-ui使用el-upload,before-upload函數(shù)不好使的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • vue3成功創(chuàng)建項目后?run?serve啟動項目報錯的解決

    vue3成功創(chuàng)建項目后?run?serve啟動項目報錯的解決

    這篇文章主要介紹了vue3成功創(chuàng)建項目后?run?serve啟動項目報錯的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue之this.$router.push頁面刷新問題

    vue之this.$router.push頁面刷新問題

    這篇文章主要介紹了vue之this.$router.push頁面刷新問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-12-12

最新評論