组件(Component)是 Vue.js 最强大的功能。组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题。

1.父组件向子组件传值

组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。

子组件:

子组件需要从父组件获取 logo 的值,就需要使用 props: [‘logo']

父组件:

2.子组件向父组件传值

子组件主要通过事件传递数据给父组件。

子组件:

其中 transferUser 是一个自定义的事件,this.username 将通过这个事件传递给父组件 。

父组件:

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username

3.路由传值

使用时,在生命周期created赋值。

4.通过localStorage或者sessionStorage来存储数据

5.Vuex

在应用复杂时,推荐使用vue官网推荐的vuex。

https://vuex.vuejs.org/zh-cn/getting-started.html

vue 数据传递的方法的更多相关文章

  1. ASP.NET页面间数据传递的方法<转>

    ASP.NET页面间数据传递的方法 作者: 灰色的天空2  来源: 博客园  发布时间: 2010-10-28 11:06  阅读: 822 次  推荐: 0   原文链接   [收藏]   摘要:本 ...

  2. ASP.NET中实现页面间数据传递的方法

    说到页面间数据传递,很多人都会想到通过像Session这样的全局变量,但是向Session中添加的东西太多会增加服务器的压力,页面间数据传递,数据的作用范围越小越好.   ASP.NET页面间数据传递 ...

  3. ASP.NET 页面间数据传递的方法

    在做WEB开发时,很多地方会涉及到页面间的数据传递.这几天在完善教务基础系统,遇到了这个问题,上网查了一些资料,现总结如下: 说到页面间数据传递,很多人都会想到通过像Session这样的全局变量,但是 ...

  4. vue数据传递--我有特殊的实现技巧

    最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围.所以简单的写一下.同时有一种特殊的实现方案. 有这么几种数据传递方式,vue ...

  5. ASP.NET多种不同页面间数据传递的方法

    1. Get(即使用QueryString显式传递)     方式:在url后面跟参数.     特点:简单.方便.     缺点:字符串长度最长为255个字符:数据泄漏在url中.     适用数据 ...

  6. vue数据传递的特殊实现技巧

    最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围.所以简单的写一下.同时有一种特殊的实现方案. 有这么几种数据传递方式,vue ...

  7. js中子父页面数据传递与方法调用

    A父页面 ,B为子页面 1.父页面调用子页面 A中调用B中方法:self.frames[iframeName].BFunction(); 注:iframeName:为父页面中iframe的name属性 ...

  8. vue 组件间数据传递

    父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...

  9. 详细介绍ASP.NET页面间数据传递的使用方法

    源码:http://www.jinhusns.com/Products/Download/?type=xcj 在ASP.NET中,页面间数据传递的方法有很多.下面为大家总结一下,页面间数据传递的方法. ...

随机推荐

  1. Java Stream 官方文档翻译

    先立个flag https://docs.oracle.com/javase/8/docs/api/java/util/stream/Stream.html

  2. shiro session过期后ajax请求跳转(转)

    配置了 Shrio框架,session也集成进去了 ,发现问题session会话过期,点击页面,一直请求失败.本来想集成拦截器,过滤器,但是已经用了shiro框架,sessionDestroyed 方 ...

  3. plsql programming 08 字符串

    一般, char 和 nchar 类型很少使用. 建议使用 varchar2 和 nvarchar2, 其中( n 开头的是国家字符集, 没有n开头的是数据库字符集 ) 一般也不怎么使用国家字符集 v ...

  4. apache2+svn Expected FS format '2'; found format '3'

    format格式与svn版本号我猜对应如下: 1.4.x 对应 format 2 1.5.x 对应 format 3 …… 1.8.x 对应 format 6 那么每个format创建出的repo要用 ...

  5. php生成rss订阅

    代码: <?php $host = $_SERVER['HTTP_HOST']; $xmls = '<?xml version="1.0" encoding=" ...

  6. 猜数字游戏-python

    题目: 用python写一个猜数字的游戏,游戏规则如下: 1.由一个人随机写一个整数1-99(如:21) 2.一群小伙伴轮流猜数字,如第一个人猜一个数(如:48),则缩小范围至(1-48) 3.如第二 ...

  7. go语言发送邮件

    package main import ( "fmt" "net/smtp" "strings" ) //发送邮件的逻辑函数 func Se ...

  8. Laravel5.1 模型 --一对多关系

    一对多关系算是比较常用的一种关联关系了,关于一对多我们可以用 文章对应评论 来举例:一篇文章可以有多个评论,但是一个评论只属于一篇文章. 这就是一对多关系. 1 实现一对多关系 我们先来准备两个模型, ...

  9. 持续集成 解决 Jenkins 中无法展示 HTML 样式的问题

    对于测试报告来说,除了内容的简洁精炼,样式的美观也很重要.常用的做法是,采用HTML格式的文档,并搭配CSS和JS,实现自定义的样式和动画效果(例如展开.折叠等). 在Jenkins中要展示HTML文 ...

  10. [转]JavaWeb之 Servlet执行过程 与 生命周期

    https://www.cnblogs.com/vmax-tam/p/4122105.html Servlet的概念 什么是Servlet呢? Java中有一个叫Servlet的接口,如果一个普通的类 ...