一.使用广播的方式$emit(), $on()
1.创建js文件
import Vue from 'vue'
export default new Vue()
组件A
import bus from '../../static/js/commonvue'
mounted() {
bus.$emit('componentsA', ‘组件A的值’); //传值
}
组件B
import bus from '../../static/js/commonvue'
mounted() {
bus.$on('componentsA', (value) => { // 接收值
console.log("组件B:", value);
})
}
用一个空的 Vue 实例(Bus)来做中央事件总线更加清晰也易于管理。但前提是两个组件必须渲染完成后才能实现通信,如果组件A销毁,那么将无法完成通讯。
二.使用vuex
我们可以把公用的数据使用vuex来进行存储,可以在项目中的任何一个组件里进行获取、进行修改,并且你的修改可以得到全局的响应变更。
Vuex的使用,首先是安装
npm install vuex –save
1.创建一个js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 存储共用的数据
export default new Vuex.Store({
state:{
value:"vuex值"
}
})
2.在main.js文件中引入
import store from '../static/js/commonvue'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
3.使用时直接调用
组件A
mounted() {
this.$store.state.value = “组件A的值”; //修改值
}
组件B
mounted() {
this.msg = this.$store.state.value;//接收值
}
三.使用Vue.prototype
使用prototype原型挂载属性,作为全局变量
1.创建js文件,声明变量
let gl_value = undefined;
export default {gl_value};
2.main.js文件中添加
import gl_value from '../static/js/commonvue'
Vue.prototype.$GLOBAL = gl_value;
3.调用
组件A
mounted() {
this.$GLOBAL.gl_value = “组件A的值”; //修改值
}
组件B
mounted() {
this.msg = this.$GLOBAL.gl_value;//接收值
}