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 相关文章推荐
Jquery截取中文字符串的实现代码
Dec 22 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
JQuery之focus函数使用介绍
Aug 20 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
js中top的作用深入剖析
Mar 04 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
js实现一个简易计算器
Mar 30 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面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
asp批量修改记录的代码
2008/06/25 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
详谈javascript异步编程
2016/02/21 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
如何快速上手Vuex
2017/02/14 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
vue中如何使用ztree
2018/02/06 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
token 机制和实现方式
2020/12/15 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
python万年历实现代码 含运行结果
2017/05/20 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
市场营销管理毕业生自荐信
2014/03/03 职场文书
大学活动总结格式
2014/04/29 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
2015教师见习期工作总结
2014/12/12 职场文书
清明节寄语2015
2015/03/23 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript