學習微信自定義元件

2021-10-11 09:15:07 字數 2000 閱讀 4161

開發者可以將頁面內的功能模組抽象成自定義元件,以便在不同的頁面中重複使用。

類似於頁面,乙個自定義元件由 json wxml wxss js 4個檔案組成

1、配置自定義元件

在json檔案中寫入**:「component」: true 表示自定義元件宣告,**如下所示。

同時,js檔案中也需要寫成這種格式,其**如下:

component(,

methods:

, clickeventc:

function

(e)}

})

properties是元件的對外屬性。

methods是元件的方法。

this.clickeventcnmae是觸發事件。

更多引數請參考 component文件

2、使用元件

使用自定義元件前,在需要引入元件的頁面的json檔案中配置:

}

需要注意的是:元件的對外屬性名是駝峰命名法,wxml引用元件屬性時則對應使用連字元。如屬性名:abcabc,引用時則是abc-abc。

3、元件間通訊

下文稱自定義元件為:子元件

引用元件為:父元件

1、子元件觸發事件。

子元件使用triggerevent方法觸發事件,向父元件傳遞資料,示例**:

component(}

})

父元件監聽事件

bind:myevent

="onmyevent"

/>

2、父元件wxml 資料繫結

用於父元件向子元件的指定屬性設定資料,示例**:

>

prop-a

="}"

prop-b

="}"

>

component-tag-name

>

view

>

4、子元件 wxml 的 slot
子元件 slot 節點,用於承載父元件提供的 wxml 結構。

預設情況下,乙個元件的 wxml 中只能有乙個 slot 。使用多 slot 時,需要在元件 js 中宣告啟用。如下:

component(,

})

子元件的 wxml 中使用多個 slot ,以不同的 name 來區分。如下:

class

=>

name

="before"

>

slot

>

>

這裡是元件的內部細節view

>

name

="after"

>

slot

>

view

>

父元件使用時,用 slot 屬性來將節點插入到不同的 slot 上。如下:

>

>

slot

="before"

>

這裡是插入到元件slot name="before"中的內容view

>

slot

="after"

>

這裡是插入到元件slot name="after"中的內容view

>

component-tag-name

>

view

>

微信小程式自定義元件

父元素 子元件 可以由多個 子元件 a,b,c,d 父元素 首先是關於元件的建立 1 單獨建立乙個資料夾存放 wxss x.js wxml json這四個檔案,其中主要對元件進行宣告的是json檔案,需要寫入 這段 就是讓元件允許被使用,如果元件需要呼叫另乙個元件中,那麼就需要再usingcompe...

微信小程式自定義元件

根據專案需要,抽離出公共的元件。1 在專案根目錄新建乙個component的資料夾,然後新建自己需要的檔案 專案目錄如下 在component裡面我新建了3個子元件。2 子元件的寫法 只有js檔案格式不一樣,其他的檔案都正常寫。js需要自定義乙個component,參考 示例 component d...

微信小程式 自定義元件

建立自定義元件 元件的構成類似頁面,由json wxml wxss js 4個檔案組成。在新建乙個元件的時候需要在元件的json檔案中設定 components 字段 true 在元件wxss中不應使用id選擇器 屬性選擇器和標籤名選擇器。這句是官方說的,我想應該是會全域性汙染 自定義元件的js檔案...