Vue slot插槽的使用詳情
1、為什么使用slot
1.1 slot(插槽)
- 在生活中很多地方都有插槽，電腦usb的插槽，插板當(dāng)中的電源插槽
- 插槽的目的是為了讓我們原來的設(shè)備具備更多的擴展性
- 比如電腦的
USB我們可以插入U盤，手機，鼠標，鍵盤等等
1.2 組件中的插槽
- 組件的插槽也是為了讓我們的組件更具有擴展性
- 讓使用者決定組件內(nèi)部的一些內(nèi)容到底展示什么
1.3 例子
- 移動開發(fā)中，幾乎每個頁面都有導(dǎo)航欄
- 導(dǎo)航欄我們必然封裝成一個插件
- 一旦有了這個組件，我們就可以在多個頁面中復(fù)用了
2、如何封裝這類組件（slot）
- 最好的封裝方式就是將共性抽取到組件中，將不同的部分暴露為插槽
- 一旦我們預(yù)留了插槽，就可以讓使用者根據(jù)自己的需求，決定插槽中插入什么內(nèi)容
- 是搜索框，是文字，是按鈕，由調(diào)度者自己決定
3、 插槽的案例
<div id="app">
<cpn><button>按鈕</button></cpn>
<cpn><p>hello world</p></cpn>
<cpn><p>666</p></cpn>
</div>
<template id="cpn">
<div>
<h2>我是組件</h2>
// 插槽預(yù)留的位置，方便使用者自己填寫
<slot></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
components: {
"cpn": {
template: `#cpn`,
}
}
})
</script>
上述代碼干了以下事情：
- 1.定義了子組件
cpn，然后在子組件中預(yù)留了一個插槽，插槽的內(nèi)容由用戶填寫 - 2.父組件中使用了3次子組件，3個子組件分別給插槽填寫了不同的內(nèi)容
最后展示效果如下：
4、插槽默認值
如果我們需要大量使用這個組件，而且組件預(yù)留的插槽，我們大多數(shù)都是填寫的返回按鈕，只有極少數(shù)填寫其他的，那么這種情況就可以為插槽設(shè)置一個默認值
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<slot><button>返回</button></slot>
</div>
</template>
我們在子組件中設(shè)置了一個默認值為返回按鈕的插槽，那么父組件在使用時如果不填寫任何內(nèi)容，那么默認就是返回按鈕
5、具名插槽
有時我們需要多個插槽。例如對于一個帶有如下模板的組件：
<template id="cpn">
<div>
<slot name="header"><span>頭部</span></slot>
<slot name="main"><span>中間</span></slot>
<slot name="footer"><span>頁腳</span></slot>
</div>
</template>
我們在組件中預(yù)留了3個插槽，但是這里指定了3個名字，后續(xù)父組件使用v-slot指定name屬性后就能填寫自己的內(nèi)容，比如如下代碼
<div id="app">
<cpn>
<template v-slot:header>
<p>header頭部</p>
</template>
<template v-slot:footer>
<p>footer頁腳</p>
</template>
</cpn>
</div>
使用了cpn組件，然后指定了插槽name屬性為header和footer的內(nèi)容，指定后自己填寫的內(nèi)容就會替換默認的內(nèi)容。
注意：這里的語法格式是固定的，必須在使用template標簽上綁定v-slot:插槽的名字
6、編譯作用域
通過外面?zhèn)鹘o組件的變量，在以后使用插槽的時候是不能使用的
<div id="app">
<cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
<p>hello</p>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isShow: true
},
components: {
"cpn": {
template: `#cpn`,
data(){
return{
isShow: false
}
}
}
}
})
</script>
上面我們定義了子組件cpn，子組件中有屬性isShow，app實例中也定義了屬性isShow，最后使用子組件cpn時使用了v-show，當(dāng)值為true顯示，值為false不顯示
問題：v-show中的isShow的值是實例中的true還是子組件中的false
答案：是true，因為你使用的時候是在app實例范圍內(nèi)，所以isShow會去從實例中的data去查找，雖然你是在cpn子組件中綁定的，但是這里的cpn你只需要把他當(dāng)做普通的標簽即可，如果你想讓isShow的值為false，那么你只需要在子組件的template模板中使用<p v-show="isShow">hello</p>
7、作用域插槽
默認在插槽中的代碼只能使用全局Vue中的屬性，如果想要使用自定義組件中的屬性，那么需要在定義slot的時候使用v-bind來進行綁定。
<div id="app">
<cpn>
<template v-slot:default="slot">
{{slot.data.firstName}}
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="user">
{{user.lastname}}
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
components: {
"cpn": {
template: `#cpn`,
data(){
return{
"user": {
"firstName": "甲",
"lastname": "殼蟲"
}
}
}
}
}
})
</script>
上述代碼做了如下幾件事情:
- 1.定義了子組件cpn，在子組件中定義了
user - 2.在子組件cpn的模板的插槽中綁定了屬性
data，且插槽的默認值為user.lastname
- 3.在
html中使用了子組件，并使用v-slot綁定了插槽Prop對象，這樣就可以通過對象名稱.子組件中綁定的屬性名稱(slot.data)，來訪問子組件中的數(shù)據(jù)
到此這篇關(guān)于Vue slot插槽的使用詳情的文章就介紹到這了,更多相關(guān)Vue slot插槽的使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue-loader其實就是一個webpack的loader，用來把vue組件轉(zhuǎn)換成可部署的js, html, css模塊，這篇文章主要介紹了Vue-loader使用教程,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)滑動驗證功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
本文給大家分享了vue實現(xiàn)簡易翻頁效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-11
這篇文章主要為大家介紹了vue3?typescript封裝axios過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了vue如何自定義事件傳參，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了.netcore+vue 實現(xiàn)壓縮文件下載功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
網(wǎng)頁截圖與截屏功能在許多Web應(yīng)用程序中都非常有用,Vue.js作為一個流行的JavaScript框架,提供了許多工具和庫來簡化網(wǎng)頁截圖和截屏的實現(xiàn),本文將介紹如何使用Vue來實現(xiàn)一個網(wǎng)頁截圖和截屏功能的示例,包括使用html2canvas庫和vue-cropper庫,需要的朋友可以參考下2023-10-10
文章介紹了如何在Vue中通過Click方法獲取原事件的參數(shù),包括默認參數(shù)、自定義參數(shù)以及如何同時獲取原生事件和自定義參數(shù)的方法2024-12-12
這篇文章主要介紹了Vue.js子組件向父組件通信的方法實例代碼，非常不錯，具有一定的參考價借鑒價值，需要的朋友可以參考下2018-12-12