Vue2子元件之間的通訊

2021-10-07 21:22:16 字數 823 閱讀 2554

大多數應用程式要求元件與其父元件或子元件進行通訊。推薦的方法是實施乙個狀態管理解決方案,例如 vuex(官方的,支援的flux類實現)甚至vuestash。

但是,對於相對簡單的應用程式來說,這可能會帶來一些開銷,您只需要少量的跨元件通訊。這是您可以使用全域性事件匯流排的地方。

為了使您的應用程式中的任何地方可用,您可以將其附加到

vue全域性物件。

const

eventbus

=new

vue()

object

.defineproperties

(vue

.prototype,}

})觸發全域性事件1.

您現在可以觸發元件中的事件:

export

default)}

}2.或直接在您的

html

模板<

div>

<

button

@click="

$bus.$emit('my-event')

">

click

totrigger

event

<

/button

>

<

/div

>

監聽事件

事件可以在任何元件中收聽。

export

default)}

}包括事件匯流排元件本身

const

eventbus

=new

vue(,

methods:}

})

vue元件,父元件與子元件之間通訊

vue元件,元件是乙個可復用的功能模組,即將具有相同功能的模組抽取成乙個元件,在需要的地方引用即可,這體現了 封裝的思想,下面看一下元件是如何實現 定義乙個名為 button counter 的新元件 vue.component button counter template you clicked...

Vue 父元件與子元件之間的通訊

1.父元件把資料傳遞給子元件 prop 是父元件用來傳遞資料的乙個自定義屬性。父元件的資料需要通過 props 把資料傳給子元件,子元件需要顯式地用 props 選項宣告 prop 2.子元件把資料傳遞給父元件 父元件是使用 props 傳遞資料給子元件,但如果子元件要把資料傳遞回去,就需要使用自定...

vue 2 元件之間傳值

對vue2版本的元件之間傳值的乙個簡單整合 父元件 子元件 props 和 refs props parent this.ref.helloworld.msg子元件 父元件 自定義事件 child this.emit send msg parent 兄弟元件 通過共同祖輩搭橋 par ent或 pa...