目錄3、provide 和 inject
4、$parent 和 $children
5、$attrs 和 $listeners
6、vuex
vue 元件之間通訊的六種方式
1、props 和 $emit（子 觸發 父）、ref（父 呼叫 子）
示例**如下：
// parent.vue
我是parent元件
// child.vue
我是child元件
父元件傳的值：}
修改 parentvalue
示例**如下：
// 新建乙個vue例項，作為事件匯流排；可將其註冊到全域性或者vue的propotype上
vue.propotype.eventbus = new vue();
// compa.vue
我是compa元件
value的值：}
// compb.vue
我是compb元件
修改 compa 的value
3、provide 和 inject
示例**：
// compa.vue
我是compa元件
value的值：}
// compb.vue
我是compb元件
呼叫 compa 的fn
5、$attrs 和 $listeners
6、vuex
vuex 類似於乙個倉庫，可存放一些資料供全域性呼叫，但是重新整理頁面就會消失，若需解決此問題，可選擇將資料儲存到 vuex 的同時，將其存放到 sessionstorage 或者 localstorage 中即可。
vuex 中包括 state、mutations、actions、getters、modules 幾個部分。其中
示例**：
// module.js
const state = ;
const getters = ,
getmodelselectdatajsonstr: state => ,
getmodelclassdatajsonstr: state =>
};const mutations = ,
set_model_select_data_json_str(state, modelselectdatajsonstr) ,
set_model_class_data_json_str(state, modelclassdatajsonstr)
};const actions = , modelcreatedatajsonstr) ,
setmodelselectdatajsonstr(, modelselectdatajsonstr) ,
setmodelclassdatajsonstr(, modelclassdatajsonstr)
};// 暴露倉庫
export ;
// index.js
import vue from 'vue';
import vuex from 'vuex';
vue.use(vuex);
/** * 批量匯入module下的所有模組
* 如果module下面有自己新建的資料夾 資料夾裡面的js檔案不能用index命名 容易衝突
*/const path = require('path');
const files = require.context('./module', true, /\.js$/);
const modules = {};
files.keys().foreach(key => );
vue.use(vuex);
const store = new vuex.store();
export default store;
vue元件之間通訊
個人blog，歡迎關注加收藏 元件之間通訊的幾種方式 1.父向子傳資料 props 2.子向父傳資料 emit 3.兄弟元件傳資料 a.事件匯流排 bus 在父元件的data中bus new vue 建立 事件匯流排 b.傳遞資料 this.roo t.bu s.root.bus.root.b us...
Vue元件之間通訊
vue元件傳值有以下幾種情況 父元件向子元件傳值 子元件向父元件傳值 兄弟元件之間傳值等 一 父元件向子元件傳值 傳值方式 props 動態傳遞值 子元件son 靜態傳值 父元件 子元件 son 1 prop的大小寫 html中的attribute名對大小寫不敏感，所以prop中的駝峰值需要等價於短...
vue元件之間的通訊
區域性元件 區域性元件必須手動掛載，不然無法生效。全劇元件 全域性元件不需要手動掛載，但不常用，盡量不要在全域性上掛載變數或者元件 影響瀏覽器效能 配合模板實現元件之間的巢狀。元件是vue.js最強大的功能之一，核心目標是擴充套件htnl元素，封裝可重用 元件可按照template,style,sc...