前言：最近好几个月没有更博了，最开始是忙，后面就是忙着过中秋国庆去了。很久没有静下心学习了，默默地反思，不该有借口而怠慢。立个flag，以后每周末必须留出半天时间学习技术知识。
自己也遇到这个问题，直接转载博主的文章了，原文出处：vue非父子组件通信问题解决记录。
**注意：**发送和接受侧事件名必须一致，而涉及到对本组件中数据操作时，需要提前存储当前组件的this，$emit本身也是一个对象，直接用this则是指向了这个事件对象而非vue组件本身！！
、、、、、、、、、、、、、、、、、、、、、、华丽的分割线、、、、、、、、、、、、、、、、、、、、
问题描述：最近在做登录部分时遇到一个场景，当点击 “用户”按钮时，首先渲染login组件，在用户登录后直接跳转到用户信息界面（user组件）。这里遇到了需要将login组件通过异步请求获得的用户信息传向 user组件，但是login和login组件不是父子组件，就暂称为兄弟组件吧。 简而言之，我要解决的就是兄弟组件之间的信息传递问题。
-
//位于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) {
-
// ...
-
})
最好先新建一个js文件，来创建出我们的eventBus，我们把它命名为bus.js
-
import Vue
from
'vue';
-
export
default
new 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 中
-
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
new 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';
所以，中大型的项目还是在一开始就直接使用vuex是明智的决定，对于开发有很大的便利。
<script>
(function(){
function setArticleH(btnReadmore,posi){
var winH = $(window).height();
var articleBox = $("div.article_content");
var artH = articleBox.height();
if(artH > winH*posi){
articleBox.css({
'height':winH*posi+'px',
'overflow':'hidden'
})
btnReadmore.click(function(){
articleBox.removeAttr("style");
$(this).parent().remove();
})
}else{
btnReadmore.parent().remove();
}
}
var btnReadmore = $("#btn-readmore");
if(btnReadmore.length>0){
if(currentUserName){
setArticleH(btnReadmore,3);
}else{
setArticleH(btnReadmore,1.2);
}
}
})()
</script>
</article>
2256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
