vue2.0组件之间传值、通信的多种方式(干货)


Posted in Javascript onFebruary 10, 2018

Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单。这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。

一、通过路由带参数进行传值

①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

②在B组件中获取A组件传递过来的参数

this.$route.query.orderId

二、通过设置 Session Storage缓存的形式进行传递

①两个组件A和B,在A组件中设置缓存orderData

const orderData = { 'orderId': 123, 'price': 88 }
sessionStorage.setItem('缓存名称', JSON.stringify(orderData))

②B组件就可以获取在A中设置的缓存了

const orderData = { 'orderId': 123, 'price': 88 }
sessionStorage.setItem('缓存名称', JSON.stringify(orderData))const orderData = { 'orderId': 123, 'price': 88 }
sessionStorage.setItem('缓存名称', JSON.stringify(orderData))

此时 dataB 就是数据 orderData

朋友们可以百度下 Session Storage(程序退出销毁) 和 Local Storage(长期保存) 的区别。

三、父子组件之间的传值

(一)父组件往子组件传值props

①定义父组件,父组件传递 number这个数值给子组件,如果传递的参数很多,推荐使用json数组{}的形式

vue2.0组件之间传值、通信的多种方式(干货)

②定义子组件,子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型,如果不符合会报错。

vue2.0组件之间传值、通信的多种方式(干货)

③假如接收的参数 是动态的,比如 input输入的内容 v-model的形式

注意:传递的参数名称不识别驼峰命名,推荐使用横杠-命名

vue2.0组件之间传值、通信的多种方式(干货)

vue2.0组件之间传值、通信的多种方式(干货)

(二)、子组件往父组件传值,通过emit事件

vue2.0组件之间传值、通信的多种方式(干货)

vue2.0组件之间传值、通信的多种方式(干货)

四、不同组件之间传值,通过eventBus(小项目少页面用eventBus,大项目多页面使用 vuex)

①定义一个新的vue实例专门用于传递数据,并导出

vue2.0组件之间传值、通信的多种方式(干货)

②定义传递的方法名和传输内容,点击事件或钩子函数触发eventBus.emit事件

vue2.0组件之间传值、通信的多种方式(干货)

③接收传递过来的数据

注意:enentBus是一个另一个新的Vue实例,区分两个this所代表得vue实例

vue2.0组件之间传值、通信的多种方式(干货)

五、vuex进行传值

为什么使用vuex?

vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),或者大型spa单页面框架项目,页面多并且一层嵌套一层的传值,异常麻烦,用vuex来维护共有的状态或数据会显得得心应手。

需求:两个组件A和B,vuex维护的公共数据是 餐馆的名称 resturantName,默认餐馆名称是 飞歌餐馆,那么现在A和B页面显示的就是飞歌餐馆。如果A修改餐馆名称 为 A餐馆,则B页面显示的将会是  A餐馆,反之B修改同理。这就是vuex维护公共状态或数据的魅力,在一个地方修改了数据,在这个项目的其他页面都会变成这个数据。

vue2.0组件之间传值、通信的多种方式(干货)vue2.0组件之间传值、通信的多种方式(干货)

①首先新建一个 sotre文件夹,分开维护 actions mutations getters

vue2.0组件之间传值、通信的多种方式(干货)

②在index.js文件中新建vuex 的store实例

*as的意思是 导入这个文件里面的所有内容,就不用一个个实例来导入了。

vue2.0组件之间传值、通信的多种方式(干货)

③在main.js中导入 store实例

vue2.0组件之间传值、通信的多种方式(干货)

④在组件A中,定义点击事件,点击 修改 餐馆的名称,并把餐馆的名称在事件中用参数进行传递。

...mapactions 和 ...mapgetters都是vuex提供的语法糖,在底层已经封装好了,拿来就能用,简化了很多操作。

其中...mapActions(['clickAFn']) 相当于this.$store.dispatch('clickAFn',{参数}),mapActions中只需要指定方面即可,参数省略。

...mapGetters(['resturantName'])相当于this.$store.getters.resturantName

vue2.0组件之间传值、通信的多种方式(干货)

    B组件同理

vue2.0组件之间传值、通信的多种方式(干货)

⑤actions中的操作,为了方便理解,ES6的箭头函数换成了比较好理解的函数,commit提交到mutations中

vue2.0组件之间传值、通信的多种方式(干货)

⑥mutations,mutations值所有vuex步骤中唯一能改变数据的操作,在其他步骤修改都是非法的。

在此步骤中,把组件中传递过来的  餐馆名称赋值给了vuex共同维护的状态 resturantName,这时所有的resturantName都变成了餐馆A

vue2.0组件之间传值、通信的多种方式(干货)

⑦在getter中获取最终的状态

vue2.0组件之间传值、通信的多种方式(干货)

⑧在计算属性中,渲染最终的数据 resturantName

vue2.0组件之间传值、通信的多种方式(干货)

总结

以上所述是小编给大家介绍的vue2.0组件之间传值、通信的多种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
document.all与WEB标准
May 13 Javascript
一个简单的javascript类定义例子
Sep 12 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
浅谈React高阶组件
Mar 28 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
js实现上传按钮并显示缩略图小轮子
May 04 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 #Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 #Javascript
Vue组件和Route的生命周期实例详解
Feb 10 #Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 #Javascript
vue.js 微信支付前端代码分享
Feb 10 #Javascript
详解如何实现一个简单的 vuex
Feb 10 #Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 #Javascript
You might like
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP中比较时间大小实例
2014/08/21 PHP
在Debian系统下配置LNMP的教程
2015/07/09 PHP
基于PHP制作验证码
2016/10/12 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
JavaScript 图像动画的小demo
2012/05/23 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
2016/06/23 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
JavaScript中Dom操作实例详解
2019/07/08 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Python Gitlab Api 使用方法
2019/08/28 Python
django rest framework 过滤时间操作
2020/07/12 Python
最受欢迎的自我评价
2013/12/22 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
爱情寄语大全
2014/04/09 职场文书
经济管理自荐书
2014/06/09 职场文书
民主生活会汇报材料
2014/12/15 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
道歉短信大全
2015/05/12 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android