vue 父子控制項 相互通訊

2021-10-25 03:16:38 字數 3276 閱讀 8053

1、父元件可以使用 props 把資料傳給子元件。

2、子元件可以使用 $emit 觸發父元件的自定義事件。

3、兄弟元件可以使用vm.$emit

( event, arg )

//父元件:parent.vue

>

>

child

>

div>

template

>

>

import child from

"./child"

;export

default},

components:

}script

>

//子元件:child.vue

>

>

}div

>

template

>

>

export default

},}兩種情況:

1、m ei

t事件觸

發,通過

子元件內

部的事件

觸發自定

義事

件meit事件觸發,通過子元件內部的事件觸發自定義事件

meit事件

觸發,通

過子元件

內部的事

件觸發自

定義事件

emit

2、$meit事件觸發, 可以通過父元件操作子元件 (ref)的事件來觸發 自定義事件

第一種情況:

//父元件:parent.vue

>

>

v-on:childevent

=『wathchildevent『

>

child

>

>

子元件的資料為:}div

>

div>

template

>

>

import child from

"./child"

;export

default},

components:

, methods:}}

script

>

//子元件:child.vue

>

>

type

="button"

value

="子元件觸發"

@click

="target"

>

div>

template

>

>

export

default},

methods:},

}script

>

第二種情況

//父元件:parent.vue

>

>

v-on:childevent

=『wathchildevent『

ref=

"childcomp"

>

child

>

type

="button"

@click

="parentenvet"

value

="父元件觸發"

/>

>

子元件的資料為:}div

>

div>

template

>

>

import child from

"./child"

;export

default},

components:

, methods:

, parentenvet:

function()

}}script

>

//子元件:child.vue

>

>

div>

template

>

>

export

default},

methods:},

}script

>

(1)、兄弟之間傳遞資料通過事件

(2)、建立乙個新vue的例項,讓各個兄弟共用同乙個事件機制。(關鍵點)

(3)、傳遞資料方,通過事件觸發$emit(方法名,傳遞的資料)。

(4)、接收資料方,在mounted()鉤子函式(掛載例項)中 觸發事件$on(方法名,callback(接收資料的資料)),此時callback函式中的this已經發生了改變,可以使用箭頭函式。

//建立乙個空的vue例項,將通訊事件掛載在該例項上

import vue from 『vue『

export default new vue()

//兄弟元件a:childa.vue

>

>

>

a元件->}span

>

div>

template

>

>

import vmson from

"./emptyvue"

export

default},

methods:}}

script

>

//兄弟元件b:childb.vue

>

>

>

b元件,a傳的的資料為->}span

>

div>

template

>

>

import vmson from

"./emptyvue"

export

default},

mounted()

)}}script

>

//父元件:parent.vue

>

>

>

>

>

childb

>

div>

template

>

>

import childa from

"./childa"

;import childb from

"./childb"

;export

default},

components:,}

script

>

Vue元件間相互通訊(一)

父元件向子元件傳值 流程 1 父元件中引入子元件 2 在父元件中通過v bind繫結屬性 3 子元件中通過props獲取到父元件傳遞的值 父元件 father id text v model fathermsg 這裡是父元件 h3 fathermsg children 註冊children子元件 v...

vue中元件之間相互通訊(二)

兄弟元件之間的相互通訊 兄弟元件的通訊是需要有個專案匯流排去管理組與件之間通訊的方法。建立匯流排 bus.js,在檔案中例項化乙個新的vue例項物件 bus.js import vuefrom vue export default new vue 建立需要通訊的兩個元件 firstcomponent...

藍芽模組相互通訊

藍芽模組相互通訊 工具 兩個usb轉ttl 兩個藍芽模組 在網上隨便買的藍芽模組到手發現型號是jdy 09 其實藍芽模組的使用完全可以當做串列埠使用,因為剛開始不太清楚以為藍芽模組的命令是通用的剛開始用的hc 05藍芽的命令手冊 後來發現設定主機從機模式時設定不成功,才懷疑命令不一樣,問賣家要了手冊...