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

一.使用广播的方式$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；//接收值
}

VUE非父子组件之间通信的几种方式相关推荐

Vue非父子组件之间的通信
文章目录非父子组件的通信 1.Provide和Inject 1.1基本使用 1.2处理响应式数据(了解) 2.全局事件总线非父子组件的通信此篇讲解的是, 在学习状态管理之前, 非父子间通信的方案 ...
Vue非父子组件之间传值
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>非父子 ...
VUE2.X组件之间通信的2种方式(针对子组件值变化去改变相应父组件的值)
1. 第一种方式针对针对单一变量 ,直接上代码注意:所有事件名称不能用原有的事件名或者已经存在的事件名,如使用input做为事件名,不会报错,但是效果不正确. <div class=&quo ...
bus.js非父子组件之间通讯
bus.js非父子组件之间通讯区别: bus.js就是一个公共的vue实例专门处理emit和on事件. vuex.js是做全局数据处理的,是指限定了对公共数据的使用处理方法,统一管控 vue中非父子 ...
vue组件间通信的13种方式
前言 vue是数据驱动视图更新的框架, 我们平时开发,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在v ...
Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法父子组件之间的通信方法父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
vue2.0 非父子组件之间的单一事件通信
前言 vue官网指出: 通过使用事件中心,允许组件自由交流,无论组件处于组件树的哪一层.由于 Vue 实例实现了一个事件分发接口,你可以通过实例化一个空的 Vue 实例来实现这个目的. 也就是说非父 ...
vue父子组件及非父子组件之间的传值
一.父组件向子组件传值在vue中通常使用props向子组件传递数据 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后 ...
Vue非父子组件通信的几种方式
文章目录 1.provide和inject 1.1基本使用 1.2如何处理响应式数据 2.全局事件总线mitt库 2.1安装mitt库,封装eventbus.js工具类 2.2在其中一个组件中触发事件 ...

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

一.使用广播的方式$emit(), $on()

二.使用vuex

三.使用Vue.prototype

VUE非父子组件之间通信的几种方式相关推荐

最新文章

热门文章