自定義元件:
為了更好的組織邏輯與**,可以把頁面按照功能拆成多個模組,每個模組負責其中乙個功能部分,最後頁面將這些模組引入管理起來,傳遞業務與配置資料完成**分離;
注意:自定義元件中資料模型只能使用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標籤為基礎,遵循主流前端框架樣式命名...