快應用 元件

2021-09-27 11:57:21 字數 1706 閱讀 7785

自定義元件:

為了更好的組織邏輯與**,可以把頁面按照功能拆成多個模組,每個模組負責其中乙個功能部分,最後頁面將這些模組引入管理起來,傳遞業務與配置資料完成**分離;

注意:自定義元件中資料模型只能使用data屬性,data型別可以是object 或 function 。如果是函式,返回結果必須是物件;

元件的引入:

在該標籤中,src屬性指定自定義元件的位址,name屬性指定在父元件中引用該元件時使用的標籤名稱

父子元件通訊:

1)父元件通過prop向子元件傳遞資料

父元件向子元件傳遞資料,通過在子元件的props屬性中宣告對外暴露的屬性名稱,然後在元件引用標籤上宣告傳遞的父元件資料;

例如:子元件-->   props:['say','propobject']

父元件--->   

prop-object="}">

2) 子元件對父元件通訊

當子元件對資料進行改造後,把最終資料交給父元件甚至往上,有三種辦法

a) 父元件傳遞的資料本身就是物件,子元件直接修改物件中的屬性,父元件的值也會發生改變,不推薦這種;

b) 子元件通過 $dispatch()觸發自定義事件,父元件通過 $on()監控自定義事件的觸發,如

父元件---> 

oninit()

dispathevt(evt)

子元件---->

delhandler()); }

c) 子元件通過$emit()觸發在節點上繫結的自定義事件來執行父元件中的方法,如:

父元件---->

emitevt(evt)

子元件---->

addhandler()) }

框架向開發者提供了雙向的事件傳遞

1)向下傳遞:父元件觸發,子元件響應;呼叫parentvm.$broadcast()完成向下傳遞;

例如:

父元件---->

evttypeemit()); }

子元件--->

broadevt(evt)

2) 向上傳遞: 子元件觸發,父元件響應;呼叫childvm.$dispath()完成向上傳遞

當傳遞結束後,可以呼叫evt.stop()來結束傳遞,否則會一直傳遞下去;

兄弟元件通訊:

傳統的兄弟等非父子元件之間通訊,是通過publish/subscribe模型來完成。

開發者如果想要使用這樣的能力,當然可以自己寫乙個pub/sub模型實現通訊解耦;當然在業務邏輯相對簡單的情況下,也可以使用viewmodel本身的事件繫結來處理:$on(),$emit();

例如:子元件定義了sub端的邏輯處理,有processmessage(),customeventinvm2(),

processmessage(msg):$`; }

//通過events物件:繫結事件

events: :$` }

}另乙個兄弟元件可以通過父元件中建立相互引用達到互相持有viewmodel的目的,通過在宣告週期onready()中執行establishref()實現,如:

//兄弟vm通訊

那麼另外乙個子元件的pub端定義就簡單多了,執行sendmessage()即可完成觸發;

sendmessage() }

快應用 元件(list)

一 list教程 1 簡單場景 在頁面中實現 長列表 或者 螢幕滾動 等效果時,可以使用list。平常會使用div,但是當dom結構複雜時,滾動頁面會出現卡頓現象,因為native無法復用div元件實現的列表元素 而list由於會復用相同的type屬性的list item,使得更加流暢。使用list...

快應用 元件(map)

map元件 1 關於map元件的相關屬性 latitude longitude 調整地圖元件的中心位置 scale coordtype 縮放級別 2 地圖元件支援的四種覆蓋物,包括 marker,groundoverlay,polyline 和circle.markers latitude long...

卡片 元件 快應用元件庫H UI

h ui是一套為快應用開發者量身打製的ui元件庫,以傳統html5標籤為基礎,遵循主流前端框架樣式命名習慣,對快應用原生元件二次封裝而成,以實現快應用 全元件式開發 為目標,讓快應用開發就像搭積木!h ui是一套為快應用開發者量身打製的ui元件庫,以傳統html5標籤為基礎,遵循主流前端框架樣式命名...