微信小程序 slot踩坑的解決
更新時(shí)間：2019年04月01日 12:04:42 作者：Az_dxx
這篇文章主要介紹了微信小程序 slot踩坑的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
今天在使用微信小程序 component 里的 slot 時(shí)發(fā)現(xiàn)，當(dāng)只用一個(gè) slot 并且將 slot 命名后，頁(yè)面中調(diào)用這個(gè) slot 并不會(huì)加載進(jìn)來(lái)。
研究嘗試后發(fā)現(xiàn)，如果想要使用命名的方式調(diào)用單個(gè) slot ，也需要像調(diào)用多個(gè) slot 的方式 在 component/xxx.js 里開啟多個(gè) slot 的功能。下面看代碼。
// component <view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot name="after"></slot> </view> // index 頁(yè)面 <d-slot> <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 --> <view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view> </d-slot> //結(jié)果，此時(shí)界面上不會(huì)載入 slot
而當(dāng)我把 slot 的name 刪去時(shí)，slot 就能成功載入
// component <view class='slot'> <view>哈哈哈哈哈哈哈哈</view> <slot></slot> </view> // index 頁(yè)面 <d-slot> <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 --> <view>這里是插入到組件slot name="after"中的內(nèi)容</view> </d-slot> //結(jié)果，此時(shí)界面上載入 slot
或者不刪去 name 而是在組件js中聲明啟用
// component.js
Component({
options: {
multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})
// component
<view class='slot'>
<view>哈哈哈哈哈哈哈哈</view>
<slot name="after"></slot>
</view>
// index 頁(yè)面
<d-slot>
<!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 -->
<view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view>
</d-slot>
//結(jié)果，此時(shí)界面上載入 slot
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了網(wǎng)頁(yè)掛馬方式整理及詳細(xì)介紹的相關(guān)資料,這里整理了不少方式，大家可以看下如何實(shí)現(xiàn)的，需要的朋友可以參考下2016-11-11
一文教會(huì)你解決js數(shù)字精度丟失問(wèn)題
在JavaScript中計(jì)算兩個(gè)十進(jìn)制數(shù)的和,有時(shí)候會(huì)出現(xiàn)令人驚訝的結(jié)果,相信這個(gè)大家也都知道了,下面這篇文章主要給大家介紹了關(guān)于解決js數(shù)字精度丟失問(wèn)題的相關(guān)資料,需要的朋友可以參考下2022-08-08
json 帶斜杠時(shí)如何解析的實(shí)現(xiàn)
這篇文章主要介紹了json 帶斜杠時(shí)如何解析的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
關(guān)于JavaScript的單雙引號(hào)嵌套問(wèn)題
單引號(hào)和雙引號(hào)之間可以相互嵌套。接下來(lái)通過(guò)本文給大家介紹JavaScript的單雙引號(hào)嵌套問(wèn)題 ，感興趣的朋友一起看看吧2017-08-08
微信小程序自定義toast彈窗效果的實(shí)現(xiàn)代碼
微信小程序里面的自帶彈窗icon只有兩種，success和loading。這篇文章主要介紹了微信小程序之自定義toast彈窗效果的實(shí)現(xiàn)代碼 ,需要的朋友可以參考下2018-11-11
JavaScript接口實(shí)現(xiàn)方法實(shí)例分析
這篇文章主要介紹了JavaScript接口實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript接口實(shí)現(xiàn)原理、操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05
JavaScript實(shí)現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)
數(shù)組是?JavaScript?中最強(qiáng)大的數(shù)據(jù)結(jié)構(gòu)，我們常常通過(guò)將字符串轉(zhuǎn)換為數(shù)組來(lái)解決許多算法。本文為大家總結(jié)了6個(gè)JS字符串轉(zhuǎn)數(shù)組的方法，希望對(duì)你有所幫助2022-09-09
原生Javascript實(shí)現(xiàn)繼承方式及其優(yōu)缺點(diǎn)詳解
JS作為面向?qū)ο蟮娜躅愋驼Z(yǔ)言,繼承也是其非常強(qiáng)大的特性之一,那么這篇文章主要給大家介紹了關(guān)于原生Javascript實(shí)現(xiàn)繼承方式及其優(yōu)缺點(diǎn)的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單表格，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要給大家介紹了關(guān)于微信小程序獲取手機(jī)號(hào)踩坑的相關(guān)資料,詳細(xì)記錄了踩坑的過(guò)程以及解決的方法和猜想,通過(guò)示例代碼以及圖片介紹的非常詳細(xì),需要的朋友可以參考下2021-06-06