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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 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
生成php程序的php代码
2008/04/07 PHP
php中用数组的方法设置cookies
2011/04/21 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
php简单日历函数
2015/10/28 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Django中信号signals的简单使用方法
2019/07/04 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang