1. 程式人生 > >微信小程式(元件的業務)slot 的使用

微信小程式(元件的業務)slot 的使用

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 了