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

微信小程序 slot踩坑的解決

 更新時間:2019年04月01日 12:04:42   作者:Az_dxx  
這篇文章主要介紹了微信小程序 slot踩坑的解決,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

今天在使用微信小程序 component 里的 slot 時發(fā)現(xiàn),當(dāng)只用一個 slot 并且將 slot 命名后,頁面中調(diào)用這個 slot 并不會加載進來。

研究嘗試后發(fā)現(xiàn),如果想要使用命名的方式調(diào)用單個 slot ,也需要像調(diào)用多個 slot 的方式 在 component/xxx.js 里開啟多個 slot 的功能。下面看代碼。

// component
<view class='slot'>
 <view>哈哈哈哈哈哈哈哈</view>
 <slot name="after"></slot>
</view>

// index 頁面
<d-slot>
  <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 -->
  <view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view>
</d-slot>

//結(jié)果,此時界面上不會載入 slot

而當(dāng)我把 slot 的name 刪去時,slot 就能成功載入

// component
<view class='slot'>
 <view>哈哈哈哈哈哈哈哈</view>
 <slot></slot>
</view>

// index 頁面
<d-slot>
  <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 -->
  <view>這里是插入到組件slot name="after"中的內(nèi)容</view>
</d-slot>

//結(jié)果,此時界面上載入 slot

或者不刪去 name 而是在組件js中聲明啟用

// component.js
Component({
 options: {
 multipleSlots: true // 在組件定義時的選項中啟用多slot支持
 },
 properties: { /* ... */ },
 methods: { /* ... */ }
})

// component
<view class='slot'>
 <view>哈哈哈哈哈哈哈哈</view>
 <slot name="after"></slot>
</view>

// index 頁面
<d-slot>
  <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 -->
  <view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view>
</d-slot>

//結(jié)果,此時界面上載入 slot

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 網(wǎng)頁掛馬方式整理及詳細介紹

    網(wǎng)頁掛馬方式整理及詳細介紹

    這篇文章主要介紹了網(wǎng)頁掛馬方式整理及詳細介紹的相關(guān)資料,這里整理了不少方式,大家可以看下如何實現(xiàn)的,需要的朋友可以參考下
    2016-11-11
  • 一文教會你解決js數(shù)字精度丟失問題

    一文教會你解決js數(shù)字精度丟失問題

    在JavaScript中計算兩個十進制數(shù)的和,有時候會出現(xiàn)令人驚訝的結(jié)果,相信這個大家也都知道了,下面這篇文章主要給大家介紹了關(guān)于解決js數(shù)字精度丟失問題的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • json 帶斜杠時如何解析的實現(xiàn)

    json 帶斜杠時如何解析的實現(xiàn)

    這篇文章主要介紹了json 帶斜杠時如何解析的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • 關(guān)于JavaScript的單雙引號嵌套問題

    關(guān)于JavaScript的單雙引號嵌套問題

    單引號和雙引號之間可以相互嵌套。接下來通過本文給大家介紹JavaScript的單雙引號嵌套問題 ,感興趣的朋友一起看看吧
    2017-08-08
  • 微信小程序自定義toast彈窗效果的實現(xiàn)代碼

    微信小程序自定義toast彈窗效果的實現(xiàn)代碼

    微信小程序里面的自帶彈窗icon只有兩種,success和loading。這篇文章主要介紹了微信小程序之自定義toast彈窗效果的實現(xiàn)代碼 ,需要的朋友可以參考下
    2018-11-11
  • JavaScript接口實現(xiàn)方法實例分析

    JavaScript接口實現(xiàn)方法實例分析

    這篇文章主要介紹了JavaScript接口實現(xiàn)方法,結(jié)合實例形式詳細分析了JavaScript接口實現(xiàn)原理、操作步驟與相關(guān)注意事項,需要的朋友可以參考下
    2020-05-05
  • JavaScript實現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)

    JavaScript實現(xiàn)字符串轉(zhuǎn)數(shù)組的6種方法總結(jié)

    數(shù)組是?JavaScript?中最強大的數(shù)據(jù)結(jié)構(gòu),我們常常通過將字符串轉(zhuǎn)換為數(shù)組來解決許多算法。本文為大家總結(jié)了6個JS字符串轉(zhuǎn)數(shù)組的方法,希望對你有所幫助
    2022-09-09
  • 原生Javascript實現(xiàn)繼承方式及其優(yōu)缺點詳解

    原生Javascript實現(xiàn)繼承方式及其優(yōu)缺點詳解

    JS作為面向?qū)ο蟮娜躅愋驼Z言,繼承也是其非常強大的特性之一,那么這篇文章主要給大家介紹了關(guān)于原生Javascript實現(xiàn)繼承方式及其優(yōu)缺點的相關(guān)資料,需要的朋友可以參考下
    2021-07-07
  • 微信小程序?qū)崿F(xiàn)簡單表格

    微信小程序?qū)崿F(xiàn)簡單表格

    這篇文章主要介紹了微信小程序?qū)崿F(xiàn)簡單表格,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-02-02
  • 微信小程序獲取手機號的踩坑記錄

    微信小程序獲取手機號的踩坑記錄

    這篇文章主要給大家介紹了關(guān)于微信小程序獲取手機號踩坑的相關(guān)資料,詳細記錄了踩坑的過程以及解決的方法和猜想,通過示例代碼以及圖片介紹的非常詳細,需要的朋友可以參考下
    2021-06-06

最新評論