您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“微信小程序怎么自定義組件與頁面的相互傳參”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
小程序允許我們使用自定義組件的方式來構(gòu)建頁面。
自定義組件
是不是用的微信的組件感覺很爽啊,如果不夠用怎么辦?
類似于頁面,一個自定義組件由json
wxml
wxss
js
4個文件組成
首先需要在json
文件中進行自定義組件聲明
{ "component": true }
同時,還要在wxml
文件中編寫組件模板,在wxss
文件中加入組件樣式
注意:在組件wxss中不應(yīng)使用ID選擇器、屬性選擇器和標簽名選擇器。
<!--componentes/com/com.wxml--> <view>我是組件</view> <button>按鈕組件{{num}}</button>
首先要在頁面的json
文件中進行引用聲明。還要提供對應(yīng)的組件名和組件路徑
注冊-->使用
# json文件中注冊 { // 引用聲明 "usingComponents": { // 要使用的組件的名稱 // 組件的路徑 "com": "/componentes/com/com" } } # wxml文件中使用 <!--pages/test1/test1.wxml--> <com></com>
注意點:
1.properties中:是寫其他頁面?zhèn)鬟^來的變量
2.data中:本頁面的變量,屬性
# 組件wxml文件 <!--componentes/com/com.wxml--> <!-- name值是由頁面決定的 --> <view>{{name}}大帥逼</view> # 組件js文件 // componentes/com/com.js Component({ /** * 組件的屬性列表 */ properties: { name:{ type: String, //屬性的類型 value: 'jeff' // 屬性的默認值,如果頁面沒有給這個name賦值,就使用這個value的值 } }, /** * 組件的初始數(shù)據(jù) */ data: { }, #頁面中wxml <my-con title="{{變量名}}"><my-con/> #再組件中 properties: { title:{ type:String, value:"你好" } } # 頁面wsml文件 <com name='chary'></com> //可以是固定值 <com name = "{{name1}}"></com> //這里的可以是變量
組件的方法methods里面
# 組件wxml文件 <button bind:tap="click">加一</button> # 組件js文件 methods: { click:function(e){ this.triggerEvent("jia1") // 傳遞jia1事件,不帶參數(shù)的 # this.triggerEvent("jia1",{num:e.currentTarget.dataset.num}) //帶參數(shù)的 } } # 頁面wxml文件 捕獲事件 <view>{{num}}</view> <com bind:jia1="jia"></com> # 頁面js文件 // pages/test1/test1.js Page({ data: { num:0 }, jia:function(e){ this.setData({ num: this.data.num + 1 }) } })
“微信小程序怎么自定義組件與頁面的相互傳參”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。