類似於頁面,自定義組件擁有自己的 wxml
模版和 wxss
樣式。
組件化,反過來理解,寫重復的頁面,方法,寫第二遍就煩了,抽取出來就是組件化,可以理解為公用的方法
對於通用的數據,最先想到或者理應接觸的是template,但是template有個缺點,那就是只是頁面效果,不會有對應的js操作。
微信小程序組件化,為什么要有自定義組件呢
每個頁面有對應的js(JavaScript),json(配置config),wxml(html),wxss(css)還差什么
不挺好的嘛,為什么需要自定義組件呢
當然,對於特定的某個頁面而言,是足夠了,但是如果是通用的一些頁面都需要相同的效果,
或者是相似的效果呢,你還是一步步重復的操作嘛
存在就是合理的,完全可以把自定義組件理解為是一個自定義的標簽,頁面的一個片段。
當然這只是最基本的
想想,既然是組件component,那對於pages頁面而言,就是一對多的關系。
多個頁面織入組件,怎么銜接起來呢。
pages頁面可以給component組件傳遞值,自然組件也會對應的想pages自定義的回調方法。
只要是你能想到,想實現的,都會有對應的提供。
實現方式,在目錄新建component,會自動生成對應的js,json,wxml,wxss,基本跟pages差不多
看看component各個文件內容吧
Component({
/** * 組件的屬性列表 */ properties: { }, /** * 組件的初始數據 */ data: { }, /** * 組件的方法列表 */ methods: { } })
options,multipleslots:true 在組建中啟用多個slot支持。
properties,里面可以定義一些接收pages頁面的屬性。
data,組件的數據
method,組件抽取出來的方法
具體用法
首先需要在pages頁的json配置一下開啟使用組件
說說options吧
你可以在component的wxml中
通過slot的name屬性來指定對應的pages頁面內容
ok
說說properties吧
在自定義標簽中傳遞一個num屬性
在組件中可以通過properties來傳遞
獲取num值可以通過this.properties.num來獲取
data用法的話跟page是一個樣子的。
最重要的要屬於方法事件了
page相對於組件而言,是一個一對多的過程
既然是抽取出來的,組件只能做一些共有的事,私自的一些實現肯定是得通過page自省的。
這就涉及到了回調。比如在組件中添加一個bindtap方法。
但是這個組件頁面的customevent的方法是綁定的。
對應的pages頁
在methods中,通過treggerEvent來調用page自己實現的方法。
ok,這是組件化入門