vue元件間通訊

a元件要傳遞資料給b元件 a元件是有資料的， b元件是需要資料的

vue的各個元件data是不共享的，但是我們有時需要傳遞資料，那麼就可以使用vuex的store， store是乙個物件，裡面有個state，用來儲存多個元件需要使用的資料

我們先定義資料 在store的state中， 定義資料

然後 在store的 mutations 中 ，定義方法 fn

在 a元件中，呼叫方法 this.$store.commit(『playbackhistory』, icao)

」playbackhistory「 是 方法 fn （在mutations中，定義的方法名稱）

icao 是要傳遞的資料

在b元件中可以接受資料 this.$store.state.icao

ps：不建議直接修改this.$store.state的資料，因為嚴格模式時，會報錯

子元件中發出訊息

clickbtn()

,

alone是父元件中的事件，  arguments 是子元件要傳給父元件的資料

"alone"
>
<
/son>
<
/template>
methods()
}<
/script>

"infopopinfo"
>
<
/son>
// infopopinfo 是父元件中的資料
<
/template>

export
default
<
/script>

vue元件間通訊

1 父元件向子元件傳遞資料，只需要props就行。設定資料並繫結到元件上。子元件用props接收，就能在元件內部使用獲取到的資料 反向通訊則需要在父級元件上自定義對應的方法，子元件使用 emit呼叫父元件方法，並上傳資料 content date content.vue date.vue 上面這個例...

vue元件間通訊

參考文章 vue父子元件間通訊可以用prop完成，跨級通訊則要用attrs來實現。1.attrs實現跨級通訊 父親元件 father元件 p msg1 p msg1 msg1 msg2 msg2 msg3 msg3 msg4 msg4 title 乙個標題 son1 div template imp...

vue元件間通訊

相關鏈結 元件通訊 學習鏈結vue.js 60分鐘快速入門 父元件傳子元件 父傳子方法 一 屬性傳遞 props 子元件 父元件 父傳子方法 二 廣播事件傳遞 vm.broadcast 子元件 父元件 子元件傳父元件 子傳父方法 派遣事件傳遞 vm.dispatch 子元件 父元件 兄弟元件互傳 父...