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


Posted in Javascript onJune 11, 2018

问题描述:

最近在做登录部分时遇到一个场景,当点击 “用户”按钮时,首先渲染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) { 
 // ... 
})

以自己遇到的问题为例,写出具体的实现:(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 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';

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

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

总结

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

Javascript 相关文章推荐
Add Formatted Text to a Word Document
Jun 15 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 #Javascript
详解.vue文件解析的实现
Jun 11 #Javascript
vue filters的使用详解
Jun 11 #Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 #Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 #jQuery
Node.js中的cluster模块深入解读
Jun 11 #Javascript
详解vue-router 初始化时做了什么
Jun 11 #Javascript
You might like
php批量删除数据
2007/01/18 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
js动态生成Html元素实现Post操作(createElement)
2015/09/14 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
python队列queue模块详解
2018/04/27 Python
python实现汉诺塔算法
2021/03/01 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
python实现递归查找某个路径下所有文件中的中文字符
2019/08/31 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Django使用rest_framework写出API
2020/05/21 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
驳回起诉裁定书
2015/05/19 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
主持人开场白台词
2015/05/29 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL