小程式學習筆記(二) 自定義元件

2022-10-08 22:45:28 字數 1369 閱讀 7840

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

在 json 檔案中進行自定義元件宣告(將 component 欄位設為 true)。

在 wxss 中不應使用 id 選擇器、屬性選擇器和標籤名選擇器。

在 js 檔案中,需要使用 component() 來註冊元件,並提供元件的屬性定義、內部資料和自定義方法。元件的屬性值和內部資料將被用於元件 wxml 的渲染,其中,屬性值是可由元件外部傳入的,需要宣告型別和初始值。

元件的屬性可以用於接收頁面的引數,如訪問頁面/pages/index/index?parama=123¶mb=xyz,如果宣告有屬性paramaparamb,則它們會被賦值為 123 或 xyz 。

自定義元件 js 檔案

component(

},data:

},methods:

}})

需要在引用頁面的 json 檔案中進行引用宣告,此時需要提供每個自定義元件的標籤名和對應的自定義元件檔案路徑。

因為 wxml 節點標籤名只能是小寫字母、中劃線和下劃線的組合,所以自定義元件的標籤名也只能包含這些字元。

自定義元件和頁面所在專案根目錄名不能以「wx-」為字首,否則會報錯。

使用自定義元件

// 引用頁面json

}// 引用頁面wxml

可以使用資料繫結,向子元件的屬性傳遞動態資料。

給子元件傳值

這裡是插入到元件slot中的內容

在元件模板中可以提供乙個 節點,用於承載元件引用時提供的子節點。

slot 使用

這裡是插入到元件slot中的內容

需要使用多 slot 時,可以在元件 js 中宣告啟用。在元件的 wxml 中使用多個 slot ,以不同的 name 來區分。

多個 slot

// 元件 js

component(,

properties: ,

methods:

})這裡是元件的內部細節

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

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

wxml 資料繫結:用於父元件向子元件的指定屬性設定資料,僅能設定 json 相容資料。

事件:用於子元件向父元件傳遞資料,可以傳遞任意資料。

父元件還可以通過 this.selectcomponent 方法獲取子元件例項物件,這樣就可以直接訪問元件的任意資料和方法。

03小程式自定義元件

在需要引入元件的頁面檔案下的json格式中新增component欄位 值為true 1.元件內不能使用類選擇器以外的選擇器。2.自定義的元件標籤名最好只是小寫字母 中劃線 下劃線的組合,且命名不能以wx 開頭。元件內的類樣式與元件外的類樣式,預設是有乙個隔離的效果。類似沙盒模式 1 元件內的樣式預設...

小程式之自定義元件

小程式允許我們使用自定義元件的方式來構建頁面。自定義元件官方文件 類似於頁面,乙個自定義元件由jsonwxmlwxssjs4個檔案組成 首先需要在 自定義元件下json檔案中進行自定義元件宣告 同時,還要在wxml檔案中編寫元件模板,在wxss檔案中加入元件樣式 注意 在元件wxss中不應使用id選...

小程式中自定義元件

一般單獨放在乙個資料夾中 類似以線面的這種結構,單獨出來 和一般新建的page頁面不同的是 字尾名是js 檔案中的page 變成了component 字尾名為json的檔案中多了 component true 使用的時候 需要在指定使用頁面的json 檔案中做配置 參考如下配置 前面的是元件的名稱,...