这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
本篇文章主要介绍了详解 vuejs 几种不同组件(页面)间传值的方式,具有一定的参考价值,有兴趣的可以了解一下
在应用复杂时,推荐使用 vue 官网推荐的 vuex,以下讨论简单 SPA 中的组件间传值。
一、路由传值
路由对象如下图所示:
在跳转页面的时候,在 js 代码中的操作如下,在标签中使用 <router-link> 标签
- this.$router.push({
- name: 'routePage',
- query / params: {
- routeParams: params
- }
- })
需要注意的是,实用 params 去传值的时候,在页面刷新时,参数会消失,用 query 则不会有这个问题。
这样使用起来很方便,但 url 会变得很长,而且如果不是使用路由跳转的界面无法使用。
二、通过 $parent,$chlidren 等方法调取用层级关系的组件内的数据和方法
通过下面的方法调用:
- this.$parent.$data.id //获取父元素data中的id
- this.$children.$data.id //获取父元素data中的id
这样用起来比较灵活,但是容易造成代码耦合性太强,导致维护困难
三、通过 eventBus 传递数据
使用前可以在全局定义一个 eventBus
- window.eventBus = new Vue();
在需要传递参数的组件中,定义一个 emit 发送需要传递的值,键名可以自己定义(可以为对象)
- eventBus.$emit('eventBusName', id);
在需要接受参数的组件重,用 on 接受该值(或对象)
- //val即为传递过来的值
- eventBus.$on('eventBusName', function(val) {console.log(val)})
最后记住要在 beforeDestroy() 中关闭这个 eventBus
- eventBus.$off('eventBusName');
来源: http://www.phperz.com/article/17/0816/338900.html