元件間通訊:
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...