Vue父子元件通訊 prop和 emit

2022-07-20 07:06:12 字數 854 閱讀 2019

1)父元件通過子元件的prop屬性,將資料傳送給子元件

(**第三行的cityname就是子元件的屬性)

2)子元件通過$emit監測父元件中的事件(**最後一行)

3)兄弟元件傳值san

還是通過 $emit 和 props 結合的方式

父元件

"

father

">

"handleclick

" :cityname="

msg">

子元件

"

sendcity

">點選

兄弟組建傳值

在父元件中給要傳值的兩個兄弟元件都繫結要傳的變數,並定義事件

//

父元件"

name

" />

"name

" @changename="

editname

" />export

default

},components: ,

methods: ,

}}

在子元件b中接收變數和繫結觸發事件

//

child-b 元件

姓名:}

"changename

">修改姓名

//

child-a 元件

姓名:}

即:當子元件b 通過 $emit() 觸發了父元件的事件函式 editname,改變了父元件的變數name 值,父元件又可以把改變了的值通過 props 傳遞給子元件a,從而實現兄弟元件間資料傳遞。

總結:

Vue父子元件通訊

1.父與子通訊,通過屬性傳遞值,如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...

vue父子元件通訊

一 父元件利用props往子元件傳輸資料 父元件 注意傳遞引數時要用 代替駝峰命名,html不區分大小寫 子元件 vue.component child template 二 子元件向父元件傳遞引數利用事件機制 子元件通過this.emit 派發事件,父元件利用v on對事件進行監聽,實現引數的傳遞...

Vue父子元件通訊

抓住幾個語義特點就可以了。子元件要接收父元件傳過來的內容,需要引入props,也就是說有props就是子元件 以下是子元件的內容 p div template export default script 父元件需要往子元件傳入引數,則某個部分要和引數post對應,即 v bind post post...