自定義元件,元件通訊

2021-10-14 17:52:14 字數 2468 閱讀 1175

在專案開發時,採用元件化得思想開發,搭建專案時,src下有views目錄,一般放頁面級元件,在建立乙個comment目錄來放公共元件,比如頭部元件和底部元件,然後在建立乙個feature目錄來放功能元件,比如輪播元件,上拉載入更多元件,搜尋元件,tabbar元件等,元件提公升專案得開發效率,解決了傳統專案得難維護,效率低,復用性低等問題。

用vue.extend方法來建立元件,在使用vue.componen來註冊元件,用專案開發專案,每個.vue都是乙個元件,在父元件中使用import引入子元件,components中註冊子元件,子元件不能直接使用父元件的資料,所以需要把父元件的資料傳給子元件,我們可以給父元件得子元件標籤上繫結乙個屬性:list,然後在子元件利用proprs來接受父元件傳遞過來得資料,子元件也不能直接向父元件傳遞資料,所以要在父元件得子元件標籤上繫結乙個自定義事件,然後子元件用this.emi

t來接受

父元件傳

遞過來得

資料,在

兩個子組

件需要傳

值得時候

,可以通

過子傳父

,父傳子

得方式實

現,但是

這樣傳值

很麻煩,

所以可以

用兄弟通

信來實現

,首先創

建乙個b

us.j

s檔案,

匯出空的

vue得

例項,然

後,在使

用得元件

中引入b

us.j

s檔案,

傳輸方用

this

.emit來接受父元件傳遞過來得資料,在兩個子元件需要傳值得時候,可以通過子傳父,父傳子得方式實現,但是這樣傳值很麻煩,所以可以用兄弟通訊來實現,首先建立乙個bus.js檔案,匯出空的vue得例項,然後,在使用得元件中引入bus.js檔案,傳輸方用this.

emit來接

受父元件

傳遞過來

得資料,

在兩個子

元件需要

傳值得時

候,可以

通過子傳

父,父傳

子得方式

實現,但

是這樣傳

值很麻煩

,所以可

以用兄弟

通訊來實

現,首先

建立乙個

bus.

js檔案

,匯出空

的vue

得例項,

然後,在

使用得組

件中引入

bus.

js檔案

,傳輸方

用thi

s.emit()傳遞資料,接受資料得一方用this.$on()

元件之間有三種通訊方式

父傳子
在父元件得子元件標籤上繫結乙個屬性:list,然後在子元件利用proprs來接受父元件傳遞過來得資料

子傳父
在父元件得子元件標籤上繫結乙個自定義事件,然後子元件用this.emi

t來接受

父元件傳

遞過來得

資料th

is

.emit來接受父元件傳遞過來得資料 this.

emit來接

受父元件

傳遞過來

得資料t

his.

emit有兩個引數,第乙個引數時自定義得名稱,第二引數是要傳輸得資料

兄弟傳遞
首先建立乙個bus.js檔案,匯出空的vue得例項

在使用得元件中引入bus.js檔案,

傳輸方用this.emi

t()傳

遞資料,

接受資料

得一方用

this

.emit()傳遞資料, 接受資料得一方用this.

emit()

傳遞資料

,接受數

據得一方

用thi

s.on(「事件名」,(data)=>)

注意事項:

1.不應該在元件內部改變props,這樣會破壞單項的資料繫結,導致資料流難以理解,如果有這樣的需求,可以通過 data 屬性接收或使用 computed 屬性進行轉換。

2.props 傳遞的 陣列和物件是通過引用來傳入的,所以當子元件中改變這個物件或陣列,父元件的狀態會也會做相應的更新,利用這一點就能夠實現父子元件資料的「雙向繫結」,雖然這樣實現能夠節省**,但會犧牲資料流向的簡潔性,令人難以理解,最好不要這樣去做。想要實現父子元件的資料「雙向繫結」,可以使用 v-model 或 .sync。

3.元件中不能使用同名的陣列,不然會被瀏覽器認為是同陣列

自定義元件 元件通訊及cli

案例 封裝乙個 loading 元件 loading是用來做什麼的?基於使用者體驗 loading使用方式很多 第三方的ui庫 元件庫 自定義封裝 過程 建立乙個目錄資料夾,稱之為loading 在loading中建立乙個叫做component目錄,用來放模板 在loading目錄下建立乙個inde...

自定義元件

myedittext 清除輸入的資料 setcompunddrawable 設定edittext ontouchevent ondraw 作用 繪製view顯示的內容,由系統自動呼叫 常用類 paint,canvas invalidate,postinvalidate 貪吃蛇原理 改變集合中的資料,...

自定義元件

自定義控制項 1.抽取layout如 list item home.xml 2.寫乙個類繼承1中的layout,實現父類 相對布局 的構造方法 3.使用 自定義控制項的屬性 1.布局檔案裡自定義乙個命名空間 xmlns my 2.在res的values目錄下描述自定義屬性的檔案 3.在布局檔案裡寫你...