Vue非父子组件之间通信的几种方式
# 1、使用广播的方式 $emit(), $on()
组件A
import bus from './commonvue'
mounted() {
bus.$emit('componentsA', '组件A的值'); //传值
}
1
2
3
4
2
3
4
组件B
import bus from './commonvue'
mounted() {
bus.$on('componentsA', (value) => { // 接收值
console.log("组件B:", value);
})
}
1
2
3
4
5
6
2
3
4
5
6
::: info
用一个空的 Vue
实例(Bus
)来做中央事件总线更加清晰也易于管理。但前提是两个组件必须渲染完成后才能实现通信,如果组件A销毁,那么将无法完成通讯。
:::
# 2、使用 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值"
},
mutations:{
setValue(state,val){
state.value = val;
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 在main.js文件中引入
import store from './commonvue'
new Vue({
store
})
1
2
3
4
2
3
4
# 使用时直接调用
组件A
mounted() {
let value = '组件A的值';
this.$store.state.value = value; //修改值
// 或者
this.$store.commit("setValue", value);
}
1
2
3
4
5
6
2
3
4
5
6
组件B
mounted() {
this.msg = this.$store.state.value;//接收值
}
1
2
3
2
3
# 3、使用 Vue.prototype
使用vue 原型prototype
原型挂载属性,作为全局变量。
# 3.1、创建js文件声明变量
let gl_value = undefined;
export default {gl_value};
1
2
2
# 3.2、在main.js文件中添加
import gl_value from './commonvue'
Vue.prototype.$GLOBAL = gl_value;
1
2
2
# 3.3、组件中调用
组件A
mounted() {
this.$GLOBAL.gl_value = '组件A的值'; //修改值
}
1
2
3
2
3
组件B
mounted() {
this.msg = this.$GLOBAL.gl_value;//接收值
}
1
2
3
2
3
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13