vue同級元件通訊(只用vue)

2021-08-15 11:17:23 字數 413 閱讀 6071

vue元件通訊,有父子元件通訊和同級元件通訊兩種。在有vuex的時候,可以很輕易的通過全域性的$store來進行中轉,若只用vue自身進行同級通訊。

例子中是ap1顯示me1資訊,在ap2中用按鈕改變ap1中的值。

**如下

id="ap1">

}div>

id="ap2">

id="btn2" @click="mejia1(a)">btn2button>

div>

src="">

script>

var ap1 = new vue(,

created()

})var ap2 = new vue(}})

script>

body>

VUE同級元件通訊

vue 除了常用的父子元件通訊之外,有時也會用到兄弟元件即同級元件之間的通訊 解決方案 例 元件a和元件b之間進行通訊,a控制b展示隱藏 1.先新建乙個js檔案,暫叫它為eventbus.js 檔名隨意 在內部註冊乙個空的vue 例項,作為兄弟元件之間的中轉站 import vue from vue...

vue元件間通訊 資料傳遞(父子元件,同級元件)

總結一下對vue元件通訊的理解和使用。子元件 page1.vue 子元件 page2.vue 單價 降價1元 數量 總金額 元 剩餘金額 元import page1 from components page1 components 此處的price則是傳遞給子元件的值 props 單價 單價 降價1...

Vue 元件通訊

單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...