微信小程式開發元件的使用(三)

2021-10-23 10:33:23 字數 965 閱讀 3766

properties  //相當於vue中的props接收屬性

triggerevent //相當於vue中的$emit

slot //和vue是類似的slot

1.可以通過slot為自定義元件嵌入wxml結構

2.預設乙個自定義元件只能嵌入乙個slot,如果嵌入多個slot必須要開啟options中的multipleslots

例如:component(,

......

})3.用法:

第一步:在自定義元件內部新增slot

例如:第二步:在引入自定義元件的頁面中內嵌wxml

嵌入的第乙個viewx

嵌入的第二個view

```

- 設定樣式隔離的方法:

1. 在元件的options中開啟styleisolation選項

component(,

```2. 通過外部樣式類允許外部的某個類來影響自定義元件

```1.在自定義元件js中新增允許哪個外部類的自定義屬性

component()

2.在引入頁面的子元件上新增外部樣式類屬性

3. 在子元件內部新增對應的外部樣式類名

***x

```

​ created:元件建立完成,但不能setdata

​ attached:在元件例項進入頁面節點樹時執行

​ ready:在元件在檢視層布局完成後執行

​ detached:在元件例項被從頁面節點樹移除時執行

component(,

attached() {},

},//元件與頁面相關的生命週期

pagelifetimes: ,

hide: function() ,

resize: function(size)

}})

微信小程式元件化開發

官方介紹 本次demo目錄結構 page下兩個資料夾,乙個components,用於存放元件 乙個home,為我們的主要頁面 components裡面兩個元件,乙個banner,乙個news,都是都過右鍵 新建component 生成的 第一步 配置 home.json 使頁面能使用元件 home....

微信小程式 元件化開發

7.slot 插槽的使用 8.component構造器 類似於頁面,自定義元件由json,wxml,wxss,js四個檔案 在wxml檔案中編寫屬於元件自己的模板 在wxss中編寫屬於元件的相關樣式 在js檔案中定義資料結構和相關邏輯 以home頁面為例 1.先在home.json中進行註冊 usi...

微信小程式開發 元件 5

編輯器匯出內容支援帶標籤的html和純文字的text,編輯器內部採用delta格式進行儲存。通過setcontents介面設定內容時,解析插入的html可能會由於一些非法標籤導致解析錯誤,建議開發者在小程式內使用時通過 delta 進行插入。富文字元件內部引入了一些基本的樣式使得內容可以正確的展示,...