大多數應用程式要求元件與其父元件或子元件進行通訊。推薦的方法是實施乙個狀態管理解決方案,例如 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...