直接給元件，新增屬性，在子元件中，使用props進行接收。
props: ['foo', 'aoo']1、有兩種常見的方式，第一種方式，元件上定義事件。
this.$emit('change', 'mapbar_front');
this.$emit('input', 'mapbar_front_input');
2、第二種方式，通常叫這種方式為bus通訊。
import vue from "vue";
let bus = new vue();
bus.$on(事件名,data => );
bus.$emit(事件名，資料);
其基本思想是，構建全域性store，在根元件中注入store，然後在任何地方都可以使用this.$store進行資料訪問的一種資料管理方式。
第一步、構建store。
/**
* created by mapbar_front on 2019-04-28.
*/import vuex from 'vuex';
import vue from 'vue';
import actions from './actions';
import mutations from './mutations';
vue.use(vuex);
const store = new vuex.store(,
mutations,
actions
});export default store;
new vue(
});
$listeners，記錄的是父元件中，繫結的非原生事件。
在根元件中：
com1元件
com2元件中：
com2元件
foo: }
$attrs: }
頁面效果：
provide、inject，以允許乙個祖先元件向其所有子孫後代注入乙個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。
provide / inject api 主要解決了跨級元件間的通訊問題，不過它的使用場景，主要是子元件獲取上級元件的狀態，跨級元件間建立了一種主動提供與依賴注入的關係。
下面假如a元件是b元件的上層元件。
// a.vue
export default
}
// b.vue
export default
}
這種通訊的方式，主要是通過獲取元件的例項，進行資料的獲取和方法的呼叫。
1、ref如果直接指定到dom元素上，代表了這個當前dom例項。如果指定到元件上，代表了當前的元件例項。
2、$parrent，直接表示當前元件的父元件。
3、$children，直接表示當前元件的子元件。
例項：
// 子元件
data ()
},
// 父元件
// js
console.log('comname', this.$refs.refcom.comname);
常見使用場景可以分為三類：
父子通訊： 父向子傳遞資料是通過 props，子向父是通過 events（ $emit）；通過父鏈 / 子鏈也可以通訊（ $parent / $children）；ref 也可以訪問元件例項；provide / inject api； $attrs/$listeners。
兄弟通訊： bus；vuex
跨級通訊： bus；vuex；provide / inject api、 $attrs/$listeners。
vue 元件間通訊總結
父 子元件通訊 1.props 此處不區分是否加引號，若不bind，皆作字串處理，否則作為表示式處理 若傳入物件，則子元件上的該物件與父元件中的該物件指向同乙個位址，如果希望對傳入的物件進行修改且不影響父元件，則需要看情況對其進行深 淺拷貝 若傳入的屬性在父元件中會發生變化，則將其放置在子元件的co...
vue元件通訊總結 簡述
props 父給子傳值 child props parent子給父傳值 child this.emit add good parent 事件匯流排 任意兩個元件之間傳值常用事件匯流排 或 vuex的方式 class bus on name,fn emit name,args main.js vue....
vue元件通訊方法總結
3 總結 在vue中，資料處理與傳遞是每個開發者要面對的事情，學習正確使用各種資料處理方式同時，我們可以跟進一步學習資料高效的傳遞方式，以下介紹vue2.x中常用的幾種資料處理用到的方法 常用的資料處理分以下幾種情況 2.1 瀏覽器原生方法 sessoin是瀏覽器原生訪問資料方法，常用於全域性資料的...