微信小程式(元件的業務)slot 的使用
阿新 • • 發佈:2018-12-12
1.呼叫元件向自定義元件插入內容,使用 slot
在自定義模板中有一對<view><slot></slot></view>,這裡是幹什麼用的呢?在元件模板中可以提供一個 <slot> 節點,用於承載元件引用時提供的子節點。
在components建立元件 , 點選 components 自動建立好所需檔案
在 .wxml 檔案中輸入
<view>
<slot></slot>
</view>
2 .json 檔案 開啟 : component: true 開啟元件使用
3 如果啟用多slot支援 ,在js中引入
options: {
multipleSlots: true // 在元件定義時的選項中啟用多slot支援
},
4. 元件完畢, 檢視引入元件 , pages 檔案中的屬於檢視
比如:pages檔案中的 detail 檔案引用元件,為父元件
1. 先在父元件 . json 中 引入 子元件的路徑
2. 在 wxml 使用 , 我定義的 子元件 名為 c-ping
如圖使用: <c-ping><text> 這裡寫內容 </text></c-ping>
3. 檢視就會顯示出來內容,如果沒有 slot ,檢視就不顯示內容
頁面顯示, OK 了