前端學習 Vue的元件間通訊

2021-10-07 18:29:34 字數 1403 閱讀 7388

元件間通訊:

props:

1、props的型別可以是乙個陣列或物件。

2、子元件可以使用、繫結這個陣列中的值。

3、props在vue2中,資料的傳遞是單向的,即由父元件傳給子元件,反過來不成立。

4、兩種需要更改prop的情況:子元件希望使用父元件的傳值作為初始值,並希望隨意修改,可以在元件中的data中宣告乙個變數,然後將prop中的值賦給它,就可以隨意修改了;子元件需要使用傳入的值並修改,例如需要在style中將傳入的width直接使用,可以在子元件中合適呢個名乙個計算屬性,style:function()}就可以直接設定寬度了。

5、props資料驗證:

propa:

}propb:

}

元件間通訊型別:

父子元件通訊、兄弟元件通訊,跨級元件通訊。props僅僅是從父元件到子元件的通訊。

自定義事件:子元件用emi

t()觸

發事件,

父元件用

emit()觸發事件,父元件用

emit()

觸發事件

,父元件

用on()監聽事件。子元件在事件處理中,使用$emit(「事件名稱a」,傳值…)觸發,父元件中用v-on:increase(語法糖寫法為@increase)來監聽子元件觸發的事件。另外v-on也可以監聽dom原生事件,但是需要新增「.native」,例如v-on:click.native

非父子間通訊:

使用d is

patc

h():

由下到上

派發事件

,使

用dispatch():由下到上派發事件,使用

dispat

ch()

:由下到

上派發事

件,使用

events:

…}

**事件匯流排:在component中宣告,var bus = new vue()是乙個空vue例項。所有的事件都由bus來發出,監聽。比如在乙個元件的事件處理函式中使用bus.emi

t()方

法發出時

間,在另

乙個事件

中使用b

us

.emit()方法發出時間,在另乙個事件中使用bus.

emit()

方法發出

時間,在

另乙個事

件中使用

bus.

on來監聽這個事件,就能達到中介的作用。

父/子鏈:par

ent,

parent,

parent

,children可以用來訪問當前元件的父例項和子例項,可以遞迴直至根例項或者最內層元件。

子元件索引:統一用ref:「子元件名稱」來為子元件定義索引

vue元件間通訊

1 父元件向子元件傳遞資料,只需要props就行。設定資料並繫結到元件上。子元件用props接收,就能在元件內部使用獲取到的資料 反向通訊則需要在父級元件上自定義對應的方法,子元件使用 emit呼叫父元件方法,並上傳資料 content date content.vue date.vue 上面這個例...

vue元件間通訊

參考文章 vue父子元件間通訊可以用prop完成,跨級通訊則要用attrs來實現。1.attrs實現跨級通訊 父親元件 father元件 p msg1 p msg1 msg1 msg2 msg2 msg3 msg3 msg4 msg4 title 乙個標題 son1 div template imp...

vue元件間通訊

a元件要傳遞資料給b元件 a元件是有資料的,b元件是需要資料的 vue的各個元件data是不共享的,但是我們有時需要傳遞資料,那麼就可以使用vuex的store,store是乙個物件,裡面有個state,用來儲存多個元件需要使用的資料 我們先定義資料 在store的state中,定義資料 然後 在s...