Vue非父子组件之间通信的几种方式

# 1、使用广播的方式 $emit(), $on()

组件A

import bus from './commonvue'
mounted() {
	bus.$emit('componentsA', '组件A的值');  //传值
}

1
2
3
4

组件B

import bus from './commonvue'
mounted() {
  bus.$on('componentsA', (value) => {  // 接收值
    console.log("组件B：", value); 
  })
}

1
2
3
4
5
6

::: info 用一个空的 Vue 实例（Bus）来做中央事件总线更加清晰也易于管理。但前提是两个组件必须渲染完成后才能实现通信，如果组件A销毁，那么将无法完成通讯。 :::

# 2、使用 Vuex

我们可以把公用的数据使用Vuex来进行存储，可以在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。

# 安装 Vuex

npm install vuex –save

# 创建一个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

# 在main.js文件中引入

import store from './commonvue'
new Vue({
  store
})

1
2
3
4

# 使用时直接调用

组件A

mounted() {
    let value = '组件A的值';
    this.$store.state.value = value;  //修改值
    // 或者
    this.$store.commit("setValue", value);
}

1
2
3
4
5
6

组件B

mounted() {
    this.msg = this.$store.state.value；//接收值
}

1
2
3

# 3、使用 Vue.prototype

使用vue 原型prototype原型挂载属性，作为全局变量。

# 3.1、创建js文件声明变量

let gl_value = undefined;
export default {gl_value};

1
2

# 3.2、在main.js文件中添加

import gl_value from './commonvue' 
Vue.prototype.$GLOBAL = gl_value;

1
2

# 3.3、组件中调用

组件A

mounted() {
	this.$GLOBAL.gl_value = '组件A的值';  //修改值
}

1
2
3

组件B

mounted() {
   this.msg = this.$GLOBAL.gl_value；//接收值
}

1
2
3

#Vue

上次更新: 2024/01/30, 00:35:17

← Vue监听store中数据变化的两种方式 Vue项目解决 vuex 在页面刷新后数据丢失的问题→