vue.js 怎么页面传值? 下面本篇文章给大家介绍一下 vuejs 几种不同组件 (页面) 间传值的方式. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
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
Windows.eventBus = new Vue();
在需要传递参数的组件中, 定义一个 emit 发送需要传递的值, 键名可以自己定义(可以为对象)
eventBus.$emit('eventBusName', id);
在需要接受参数的组件重, 用 on 接受该值(或对象)
- //val 即为传递过来的值 < br>
- eventBus.$on('eventBusName', function(val) {
- <br> console.log(val)<br>
- })
最后记住要在 beforeDestroy()中关闭这个 eventBus
eventBus.$off('eventBusName');
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17162.html