父元素 ----》 子元件(可以由多個)----------》子元件(a,b,c,d…)---------->父元素
首先是關於元件的建立:
1:單獨建立乙個資料夾存放***.wxss ***x.js ***.wxml ***.json這四個檔案,其中主要對元件進行宣告的是json檔案,需要寫入
}
,這段**就是讓元件允許被使用,如果元件需要呼叫另乙個元件中,那麼就需要再usingcompents這個物件中進行引入。
其次,這wxml檔案中依舊是wechart形式的html**,依舊沒有什麼需要注意的,再js**中,結構稍微由了一些改變,具體如下
component(
},/**
*/data: ,
/*** 元件的方法列表,用來存放元件中需要使用的方法。
*/methods:
})
期間需要注意的是,元件引數可以傳遞引數,而具體的傳遞引數的方式如下:
父元素到子元件:
1.首先需要引入元件,再父元素的json檔案中寫入如下**
}
其中雙引號為元件的名稱,後方為路徑,這裡就不詳細解釋了
2:呼叫元件
其中 prop-array 就是需要去傳遞的引數通常以』prop-『開頭,其中的內容如果是物件、陣列、字串,那麼一定要再元件的js中去進行宣告。基本上,引數已經傳遞到元件中了,這時候如果再元件中列印console.log(this.data); 你可以從列印的內容中找到你傳遞的引數。
子元件到父元素:
1.首先需要引入元件,具體的流程和上方的一樣,這裡就不再重複了
2:再父元素上定義方法: bindmyevent=「yetaievent」 ;這裡的這個方法非常重要,簡單的理解,這個就是乙個元件專用的監聽。
3:再元件中設定監聽方法;
var myeventdetail = // detail物件,提供給事件監聽函式
var myeventoption = {} // 觸發事件的選項
this.triggerevent('myevent', myeventdetail, myeventoption)
重要提示一下,這,不是乙個function,這只是幾行**,如果由需要返回的引數,那麼就可以通過myeventdetail這個物件就行資料的返回。
4:父元件接收資料;
父元件中要寫入乙個這樣的方法,
yetaievent : function(e),
這個方法也是剛剛再寫入元件的時候,定義的乙個方法名;這樣,就可以再列印的內容中找到自己返回的內容了。 微信小程式自定義元件
根據專案需要,抽離出公共的元件。1 在專案根目錄新建乙個component的資料夾,然後新建自己需要的檔案 專案目錄如下 在component裡面我新建了3個子元件。2 子元件的寫法 只有js檔案格式不一樣,其他的檔案都正常寫。js需要自定義乙個component,參考 示例 component d...
微信小程式 自定義元件
建立自定義元件 元件的構成類似頁面,由json wxml wxss js 4個檔案組成。在新建乙個元件的時候需要在元件的json檔案中設定 components 字段 true 在元件wxss中不應使用id選擇器 屬性選擇器和標籤名選擇器。這句是官方說的,我想應該是會全域性汙染 自定義元件的js檔案...
微信小程式 自定義元件
81 在根目錄下新建 components 資料夾 2 和建立普通的頁面一樣,建立 showloading資料夾,裡面包含 showloading.wxml,showloading.wxss,showloading.js,showloading.json 4個檔案 3 宣告自定義元件,在 showl...