vue非父子组件通信问题及解决方法

vue非父子组件通信问题及解决方法

问题描述：http://

最近在做登录部分时遇到一个场景，当点击 “用户”按钮时，首先渲染login组件，在用户登录后直接跳转到用户信息界面（user组件）。这里遇到了需要将login组件通过异步请求获得的用户信息传向 user组件，但是login和login组QssFRdLBEj件不是父子组件，就暂称为兄弟组件吧。 简而言之，我要解决的就是兄弟组件之间的信息传递问题。

//位于login.vue 中

export default {

methods:{

login(){

this.$axios({

method: 'post',

url: '/student/login/',

data: {

username: this.username,

password: this.password

}

})

.then(function (response) {

this.$router.replace({path: 'user'});

}.bind(this))

.catch(function (error) {

console.log(error);

alert('用户名或密码错误');

});

}

}

}

在异步请求完成后，就跳转到user组件中，但是response的请求返回信息就无法传到非父子组件的user组件中。

.............................................................................................................................................................................................................

解决问题：

一、首先我想到了将login组件 和 user组件放到一起（两个组件合2为1），加避免了组件间的信息传递，但是这种解决方案太low，破坏了项目原有的结构。

二、查文档得知了

非父子关系的两个组件之间也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为事件总线：

var bus = new Vue()

// 触发组件 A 中的事件

bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件

bus.$on('id-selected', function (id) {

// ...

})

以自己遇到的问题为例，写出具体的实现：（warning:  我自己遇到的情况不能用这种简单的方式解决）

最好先新建一个js文件，来创建出我们的eventBus，我们把它命名为bus.js

import Vue from 'vue';

export default new Vue();

然后在 login.vue 文件中：

//位于login.vue 中

import Bus from '../bus.js';

export default {

methods:{

login(){

this.$axios({

method: 'post',

url: '/student/login/',

data: {

username: this.username,

password: this.password

}

})

.then(function (response) {

/*

* 这里的 'login-on'是在Bus中自己构造的一个事件（不需要在别处申明），通过emit()函数

* 手动触发这个事件，然后在user.vue 中可以监听这个事件，一旦发现事件触发，就可以利用

* 回调函数接收 response 这个对象，达到信息传递的目的

* */

Bus.$emit('login-on',response);

this.$router.replace({path: 'user'});

}.bind(this))

.catch(function (error) {

console.log(error);

alert('用户名或密码错误');

});

}

}

}

在user.vue文件中：

//位于user.vue 中

import Bus from '../bus.js';

export default {

mouted : {

Bus.$on('login-on', message => { // 这里的message就是从login.vue中传来的数据

console.log(message);

});

}

}

这样就完成了数据传递。

但是在测试时发现在user.vue组件的监听 没有被触发

分析：在我遇到的情境中，login.vue组件和user.vue 组件是互相替代的关系，即需要从login组件通过vue-router跳转到user组件，在login.vue销毁后才开始渲染user.vue组件，所以在user.vue中的

Bus.$on('login-on', message =>

监听是在事件以及触发之后才开始，自然不会产生回调函数。

由此可以看出，官方推荐的eventbus 解决方案的缺陷在于， 在数据传递过程中，两个组件必须都已经被渲染过。我的这种情景下，这种方法不适用。

三、vuex解决方案：

熟悉vuex的大佬们请直接跳过吧。

最好在src的根目录下新建一个文件，叫 store.js

//位于store.js 中

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({

/*

* state指的就是储存的数据，

* 下面的数据是我在项目中需要用的数据字段

* */

state: {

has_login: false,

id: 1,

mobile_num: '',

name: ''

},

/*

* mutations里面规定的就是想要改变state(数据)的动作函数，

* 下面的user_message 就是我将传入的message赋值给仓库中的

* state数据字段，达到更新数据的目的

* */

mutations: {

user_message (state, message) {

state.has_login = true;

state.id = message.data.id;

state.mobile_num = message.data.mobile_num;

state.name = message.data.name;

}

}

})

然后在login.vue组件中，提交收到的用户信息

//位于login.vue 中

import userMessage from '../store';

export default newhttp:// Vuex.Store({

methods: {

loginSubmit () {

this.$axios({

method: 'post',

url: '/student/login/',

data: {

username: this.username,

password: this.password

}

})

.then(function (response) {

//这里调用 store.js中 mutations里面的user_message函数，从而改变仓库中的state数据

userMessage.commit('user_message', response);

this.$router.replace({path: 'user'});

}.bind(this))

.catch(function (error) {

console.log(error);

alert('用户名或密码错误');

});

}

})

最后在user.vue组件中接收vuex仓库中存储的信息，即先引入仓库

//位于user.vue 中

import userMessage from '../store';

然后可以直接将 userMessage.state 赋值给user.vue作用域中的数据字段，同时，vuex 的state有热更新的属性，对于数据的同步很有帮助，优点良多。

所以，中大型的项目还是在一开始就直接使用vuex是明智的决定，对于开发有很大的便利。

总结

以上所述是给大家介绍的vue非父子组件通信问题解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。