详解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');
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
Vue.js中兄弟组件之间互相传值实例
兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script
-
详解vuejs几种不同组件(页面)间传值的方式
在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值. 一.路由传值 路由对象如下图所示: 在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-link>标签 this.$router.push({ name: 'routePage', query/params: { routeParams: params } }) 需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题. 这样使用起来很方便,但url会
-
iOS中详解Block作为property属性实现页面之间传值
我们可以把Block当做Objective-C的匿名函数.Block允许开发者在两个对象之间将任意的语句当做数据进行传递,往往这要比引用定义在别处的函数直观.另外,block的实现具有封闭性(closure),而又能够很容易获取上下文的相关状态信息.定义Block变量,就相当于定义了一个函数.但是区别也很明显,因为函数肯定是在-viewDidLoad方法外面定义,而Block变量定义在了viewDidLoad方法内部.当然,我们也可以把Block定义在-viewDidLoad方法外部,例如上面的
-
详解vue-router和vue-cli以及组件之间的传值
首先简单介绍使用vue-router的四个基本步骤:(为了方便演示,所有代码都写在一个文件里) 1.定义组件 2.定义路由 3.创建router实例并将定义好的路由传入 4.创建和挂载根实例 再来说一下vue-cli 一.安装vue-cli脚手架工具 cnpm install vue-cli -g 二. 创建项目 vue init webpack-simple vue_webpack 使用的是webpack-simple模板,项目名为vue_webpack , webpack-simple和we
-
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
方案一:grunt-livereload + Chrome Plug-in 优点:安装.配置简单方便. 缺点:需要配合指定的浏览器插件(Firefox也有相关插件,IE么你懂的). 1. 需要安装2个插接件:grunt-contrib-watch.connect-livereload 执行命令: 复制代码 代码如下: npm install --save-dev grunt-contrib-watch connect-livereload 2. 安装浏览器插件:Chrome LiveReload
-
详解vuejs中执行npm run dev出现页面cannot GET/问题
1.问题描述 最近用vue-cli搭建了一个小项目,其中在对项目进行打包测试时修改了webpack.base.conf.js中的配置信息,之后再用npm run dev之后出现如下的情况: 1.浏览器中无法呈现已有页面,并且在浏览器控制台中报404错误 2.命令窗口中并没有报错 其中有人说是路由等问题,后来通过创建新的项目对比配置文件信息,发现是配置信息导致: 注释部分是打包时需要修改的地方(根据打包时网站根目录,这个没处理好可能会出现图片路径加载失败问题),而上面才是在开发环境下需要的配置信息
-
详解vue组件之间相互传值的方式
概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收
-
ASP.NET页面之间传值的方式之Application实例详解
Application Application变量在整个应用程序生命周期中都是有效的,类似于使用全局变量一样,所以可以在不同页面中对它进行存取.它和Session变量的区别在于,前者是所有的用户共用的全局变量,后者是各个用户独有的全局变量. 举例来解释: 网站访问的计数器变量一般采用Application变量,多个请求访问时共享这一个变量,均可对它进行操作,该变量可以被整个应用程序的各个页面直接使用. 用户登陆的帐号名一般采用Session变量,多个请求访问时有各自的Session变量,只能对自
-
详解微信小程序中的页面代码中的模板的封装
详解微信小程序中的页面代码中的模板的封装 最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰.那今天所要记录的就是关于微信小程序中的页面的模板封装. 在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义: <templatename="products&
-
spring、mybatis 配置方式详解(常用两种方式)
在之前的文章中总结了三种方式,但是有两种是注解sql的,这种方式比较混乱所以大家不怎么使用,下面总结一下常用的两种总结方式: 一. 动态代理实现 不用写dao的实现类 这种方式比较简单,不用实现dao层,只需要定义接口就可以了,这里只是为了记录配置文件所以程序写的很简单: 1.整体结构图: 2.三个配置文件以及一个映射文件 (1).程序入口以及前端控制器配置 web.xml <?xml version="1.0" encoding="UTF-8"?> &
-
Django模板标签中url使用详解(url跳转到指定页面)
django {% url %} 模板标签使用 inclusions/_archives.html ... {% for date in date_list %} <li> <a href="{% url 'blog:archive' date.year date.month %}" rel="external nofollow" > {{ date.year }} 年 {{ date.month }} 月 </a> </l
随机推荐
- pyqt4教程之messagebox使用示例分享
- python django 访问静态文件出现404或500错误
- 多种语言下获取当前页完整URL及其参数
- Vuejs第十二篇之动态组件全面解析
- 深入了解以“.”结尾的文件夹
- Linux系统命令中screen命令详解
- dos 日期时间格式设置使用小结(Date和Time)
- js倒计时代码
- 脚本div实现拖放功能(两种)
- 基于PHP制作验证码
- 分享最受欢迎的5款PHP框架
- javascript引用类型之时间Date和数组Array
- 实例讲解Ruby中的五种变量
- MySQL 5.6 如何更改安全的处理密码探讨
- setTimeout内不支持jquery的选择器的解决方案
- jQuery插件StickUp实现网页导航置顶
- serv_u 中文版完全教程第1/6页
- 实现Android 滑动退出Activity的功能
- JS生成随机打乱数组的方法示例
- vue使用echarts图表的详细方法