整理了vue中元件通訊，分以下情況：（**環境：vue2.0 vue-cli 3.0.1）
一：父--》子通訊
1、通過props：
//子元件}
//以上就是將父元件parent中的myname傳入到了子元件son中父元件
注意：根據官方文件，所有的 prop 都使得其父子 prop 之間形成了乙個單向下行繫結：父級 prop 的更新會向下流動到子元件中，但是反過來則不行。這樣會防止從子元件意外改變父級元件的狀態，從而導致你的應用的資料流向難以理解。每次父級元件發生更新時，子元件中所有的 prop 都將會重新整理為最新的值。這意味著你不應該在乙個子元件內部改變 prop。如果你這樣做了，vue 會在瀏覽器的控制台中發出警告。
二：子--》父
通過事件，使用$emit觸發，具體看以下**：
//子元件click
//三：其實父子元件通訊還可以使用vm.$refs 乙個物件，持有註冊過 ref特性 的所有 dom 元素和元件例項。父元件
//父元件通過呼叫子元件的方法，以引數的形式傳入到子元件中；同樣的子元件也可以使用方法將值傳到父元件中
//注意：根據官方文件子元件
$refs只會在元件渲染完成之後生效，並且它們不是響應式的。這僅作為乙個用於直接操作子元件的「逃生艙」——你應該避免在模板或計算屬性中訪問$refs。
因此還是不建議使用ref來進行父子之間的資料傳遞；
四：非父子元件中的資料傳遞
1、路由url傳遞
2、 eventbus通訊
eventbus這種通訊方式,針對的是非父子元件之間的通訊,它的原理還是通過事件的觸發和監聽。
但是因為是非父子元件的關係,他們需要有乙個中間元件來連線。
使用eventbus傳遞資料,我們一共需要做3件事情
2.在元件1裡,this.$root.bus.$emit觸發事件
3.在元件2裡,this.$root.bus.$on監聽事件
//bus.js
import vue from 'vue'export
default
newvue()
/*或者在main.js中新增bus屬性
import vue from 'vue'
new vue(
}})通過this.$root.bus.$emit()/.$on()來處理
*/
//元件1clickbus
//注意：首屏渲染完之後，沒有進入元件2，在元件1中直接點選handlerclick按鈕時，並不會觸發元件2中的clickbus事件，可能是這時候元件2並沒有渲染事件並沒有繫結，無法觸發元件2
五：祖--》孫
如果跨元件傳遞通過以上一步步的傳遞是比較麻煩的，可以使用$attr來實現祖孫之間的傳遞
意思就是父元件傳向子元件傳的，子元件不prop接受的資料都會放在$attrs中，子元件直接用this.$attrs獲取就可以了。如過從父->孫傳，就在子元件中新增v-bind='$attrs'，就把父元件傳來的子元件沒props接收的資料全部傳到孫元件，具體看以下**
//祖元件
//父元件
//得到一下輸出結果：子元件son
六：其他的通訊方式
1、用localstorage或者sessionstorage這種通訊比較簡單,缺點是資料和狀態比較混亂,不太容易維護。
通過window.localstorage.getitem(key) 獲取資料
通過window.localstorage.setitem(key,value) 儲存資料
注意用json.parse() / json.stringify() 做資料格式轉換。
2、provide/inject還有$children/$parent
3、使用vuex
Vue 元件通訊
單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...
vue元件通訊
這部分vue文件已經說的很清楚了，但是為了更好的理解，自己再整理一遍。首先，父元件的與子元件的通訊是通過子元件的props。那麼子元件有資料變化時，想要通知父元件應該怎麼辦呢？父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件。簡單來說，就是子元件監聽的事件，在函式內使用 emit...
Vue元件通訊
父子級通訊推薦使用 props emit parent children refs attrs listeners 子元件使用props 接收父元件傳遞的值 父元件向子元件傳值 子元件通過 emit 讓父元件接收事件，改變父元件的data裡面的值 子元件向父元件傳值 父元件 子元件 這裡的props...