微信小程式的元件通訊

2022-08-21 11:33:12 字數 688 閱讀 3041

實現方式類似於vue

引入子元件

在子元件上新增自定義屬性 例如:title,content

在子元件上的properties上新增要接收的屬性 title,content

在子元件上通過}就可以直接使用啦。。

ps:只是接收的時候vue是用props 小程式是properties 裡邊的方法都是一樣的

實現方式類似於vue

1.在子元件上觸發乙個事件 例如:catchtap="confirmmfn"

2.在對應的confirmfn上新增派發的事件和要向父級傳遞的資料

this.triggerevent('confirm','ok')

this.triggerevent('cancel','no')

3.父元件監聽子元件派發過來的事件和要接收的資料

bind要監聽的事件名=「**方法」

eg:4.在父元件的js中接收資料

//監聽確定按鈕觸發的**

confirm(e) ,

a兄弟,b兄弟,c(父元件)三個元件

a-->c--->b

元件a 通過子傳父 將資料傳給父元件 c

關於兄弟元件 這裡發現了一篇很不錯的部落格 可以看一下 這裡就不細說了~

微信小程式元件

class屬性 可以設定樣式,如果與動態資料繫結結合,元件的class具有動態變化的能力 style 通過style設定元件的內聯樣式,style屬性值中可以設定css的各種屬性 hidden 預設為false,不隱藏 data 屬性 可以用來為元件設定任意的自定義的屬性值,當元件繫結的事件觸發時,...

微信小程式 元件

官方文件見 我們的封裝 var basecomponentoption require utils basecomponentoption var option basecomponentoption.init 最小值限制 min 最大值 max 當前值 value 傳參物件,和 官方文件一致,只是...

微信小程式 Tabs元件

如果想要個性的話,可以自己修改了。這次是寫乙個tabs的元件,根據不同的狀態,回來切換操作,標記一下,先看一下效果圖 獲取,試例裡用匯入的引用,都可以從github裡找到。tabs.wxss 檔案.tabscss tabscss tab tabscss last child tabscss tab ...