我胡漢三又回來了！！！最近一直在悄咪咪的複習vue，把文件搞了搞，之前做過的一些東西看瞅了瞅。感覺複習的差不多了，準備寫一點東西記錄一下，要不過幾天又忘了
這篇文章主要來搞一下vue元件間的通訊，來來來，讓我們直接上手盤一盤
首先利用vue-cli搭建乙個專案，關於步驟在此就不詳細敘述了，在這裡我們只關心怎麼進行元件間的傳值
先看看專案結構
我直接在component裡面建立了兩個元件，乙個為parent，另乙個則為child，我們就以這兩個元件作為例子，來展示一下元件間通訊
（為了看起來更加直觀，下面涉及**的部分我將直接使用從vscode上截下來的圖）
元件間的通訊有以下幾種
1.props
2.$emit
3.provide和inject
4.$parent和$children
5.bus匯流排
6.vuex
7.vue.observable
其餘還有一些，比如跳轉路由時傳參，用localstronge等等
1.props
用props進行元件間的通訊可以輕而易舉的實現父往子傳值
父元件：
子元件：
使用$emit觸發自定義事件，實現子向父傳值
父元件：
子元件：
3.provide和inject
這對選項是一起使用的。以允許乙個祖先元件向其所有子孫後代注入乙個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。元件得引入層次過多，我們的子孫元件想要獲取祖先元件得資源，那麼怎麼辦呢，總不能一直取父級往上吧，而且這樣**結構容易混亂。這個就是這對選項要幹的事情。
provide:是乙個物件，或者是乙個返回物件的函式。裡面呢就包含要給子孫後代的東西，也就是屬性和屬性值。
inject：乙個字串陣列，或者是乙個物件。屬性值可以是乙個物件，包含from和default預設值。
父元件：
子元件：
4.$parent和$children
利用$children可以直接獲取子元件的例項，利用$parent則可以直接獲取到父元件的例項
父元件獲取子元件的屬性：
子元件獲取父元件的屬性：
5.bus匯流排
即**事件匯流排的方式。新建乙個vue事件bus物件，然後通過bus.$emit觸發事件，bus.$on監聽觸發的事件。
先建立bus.js
每個元件使用前先引入bus匯流排，然後用$on定義事件，$emit觸發事件
6.vuex
vue的狀態管理工具，用法：
7.vue.observable
可以用作簡單場景的最小跨元件狀態儲存
建立store.js
應用元件
測試元件
暫時就總結了以上這些，溜了溜了，去複習別的了
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...