微信小程式自定義元件

2021-08-31 03:32:26 字數 1357 閱讀 8800

父元素 ----》 子元件(可以由多個)----------》子元件(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...