初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正。

一.参数传值

如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值。

这里页面是通过路由跳转的,所以参数传值有两种方法,也就是借助$router的两个参数【params】和【query】。

页面跳转的话,可以通过页面路由的名称name或路径path去定义目标页面。

定义一个v-on:click="turnToPost(item.id)” 方法,进行页面跳转和传值。

传值页面:

  1. <template>
  2. <div>
  3. <el-card class="post-card" v-for="item in postList" v-bind:key="item.id" v-on:click="turnToPost(item.id)">
  4. …………
  5. </el-card>
  6. </div>
  7. </template>
  8.  
  9. <script>
  10.  
  11. export default {
  12. data() {
  13. return {
  14. postList: [
  15. {
  16. id: ,
  17. title: "I’ll think of you every step of the way.",
  18. time: "JANUARY 05, 2019",
  19. content: "Time goes by so fast, people go in and out of your life. You must never miss the opportunity to tell these people how much they mean to you"
  20. },…………
  21. ]
  22. };
  23. },
  24. methods: {
  25. turnToPost: function(id) {
  26. //参数传值
  27. this.$router.push({
  28. name: "about",//页面
  29. //path: '/blog/about',//name和path用其一就可以
  30. params: { id: id, postList:JSON.stringify(this.postList) },
  31. query: { id: id }
  32. });
  33. }
  34. }
  35. };
  36. </script>

取值页面:

mounted:el挂载到实例上后调用,一般第一个业务逻辑会在这里开始。所以我们把取值放到mounted()函数中。

  1. <template>
  2. <div class="about">
  3. <h1>about</h1>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {};
  10. },
  11. mounted: function() {
  12. this.$nextTick(function() {
  13. let id = this.$route.params.id; //params
  14. let posts = JSON.parse(this.$route.params.postList);
  15. let id2 = this.$route.query.id; //query
  16. console.log("$route", this.$route);
  17. console.log("params", id);
  18. console.log("query", id2);
  19. console.log("posts", posts);
  20. });
  21. },
  22. methods: {}
  23. };
  24. </script>

控制台输出的结果如下图:

二.缓存传值

通过localStorage和sessionStorage存储一个全局变量,在任何地方都可以取用。

传值页面:

  1. <template>
  2. <div>
  3. <el-card class="post-card" v-for="item in postList" v-bind:key="item.id" v-on:click="turnToPost(item.id)">
  4. …………
  5. </el-card>
  6. </div>
  7. </template>
  8.  
  9. <script>
  10.  
  11. export default {
  12. data() {
  13. return {
  14. postList: [
  15. {
  16. id: ,
  17. title: "I’ll think of you every step of the way.",
  18. time: "JANUARY 05, 2019",
  19. content: "Time goes by so fast, people go in and out of your life. You must never miss the opportunity to tell these people how much they mean to you"
  20. },…………
  21. ]
  22. };
  23. },
  24. methods: {
  25. turnToPost: function(id) {
  26.    //缓存传值
  27. localStorage.setItem('id',id);
  28. sessionStorage.setItem('id',id);
  29. this.$router.push({
  30. name: "about",//页面
  31. //path: '/blog/about',//name和path用其一就可以
  32. });
  33. }
  34. }
  35. };
  36. </script>

取值页面:

  1. <template>
  2. <div class="about">
  3. <h1>about</h1>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {};
  10. },
  11. mounted: function() {
  12. this.$nextTick(function() {
  13. let id3 = localStorage.getItem("id"); //localStorage
  14. let id4 = sessionStorage.getItem("id"); //sessionStorage
  15. console.log("localStorage", id3);
  16. console.log("sessionStorage", id4);
  17. });
  18. },
  19. methods: {}
  20. };
  21. </script>

控制台输出结果如下图:

Ps.

1.localStorage和sessionStorage的存储数据大小一般都是5MB,且存储在客户端,不需要持续的将数据发回服务器。

2.localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。

sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。

手动移除localStorage和sessionStorage缓存方法:

  1. //根据键删除缓存
  2. localStorage.removeItem('id');
  3. sessionStorage.removeItem('id');
  4. //删除所有缓存数据
  5. localStorage.clear();
  6. sessionStorage.clear();

3.localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

Ps.

this.$nextTick():将回调延迟到下次 DOM 更新循环之后执行。监测DOM更新完成,再请求数据,所以应该放到请求的回调函数里面。

三. 组件传值

子组件页面(About.vue):

在子组件中,props中定义想要从父页面传过来的值,此处定义了一个"msg",并显示在页面上。

  1. <template>
  2. <div class="about">
  3. <h1>{{msg}}</h1>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'about',
  9. props: ['msg']
  10. }
  11. </script>

父页面(App.vue):

1.在父页面中引入about组件

  1. import about from './views/About'
  1. components: {
  2. 'about': about
  3. }

2.在使用子组件的地方传值

  1. <about :msg="parentMsg"></about>

把父页面的parentMsg赋值给子组件的msg,当parentMsg值变化时,msg也会发生变化。

  1. <template>
  2. <div>
  3. <el-input v-model="parentMsg"></el-input>
  4. <about :msg="parentMsg"></about>
  5. </div>
  6. </template>
  7.  
  8. <script>
  9. import about from './views/About'
  10.  
  11. export default {
  12. data () {
  13. return {
  14. parentMsg: 'test'
  15. }
  16. },
  17. components: {
  18. 'about': about
  19. }
  20. }
  21. </script>

演示图如下:

以上就是Vue页面传值的两种方法,欢迎补充指正!

/****************************我是可爱的分割线********************************/

Vue页面间传值,以及客户端数据存储的更多相关文章

  1. vue 页面间传值

    使用params传参 ,不能使用path 只能使用name 使用params传参,刷新参数会消失 router/index.js import Vue from 'vue' import Router ...

  2. ASP.NET页面间传值的几种方式

    ASP.NET页面间传值的几种方式 1.使用QueryString 使用QuerySting在页面间传递值已经是一种很老的机制了,这种方法的主要优点是实现起来非常简单,然而它的缺点是传递的值是会显示在 ...

  3. iOS页面间传值的方式(NSUserDefault/Delegate/NSNotification/Block/单例)

    iOS页面间传值的方式(NSUserDefault/Delegate/NSNotification/Block/单例) 实现了以下iOS页面间传值:1.委托delegate方式:2.通知notific ...

  4. 【转】iOS页面间传值的方式(Delegate/NSNotification/Block/NSUserDefault/单例)-- 不错

    原文网址:http://www.cnblogs.com/JuneWang/p/3850859.html iOS页面间传值的方式(NSUserDefault/Delegate/NSNotificatio ...

  5. iOS页面间传值的方式 (Delegate/NSNotification/Block/NSUserDefault/单例)

    iOS页面间传值的方式(Delegate/NSNotification/Block/NSUserDefault/单例)   iOS页面间传值的方式(NSUserDefault/Delegate/NSN ...

  6. iOS页面间传值的五种方式总结(Delegate/NSNotification/Block/NSUserDefault/单例)

    iOS页面间传值的方式(Delegate/NSNotification/Block/NSUserDefault/单例) iOS页面间传值的方式(NSUserDefault/Delegate/NSNot ...

  7. mui框架如何实现页面间传值

    mui框架如何实现页面间传值 我的传值 listDetail = '<li class="mui-table-view-cell mui-media>">< ...

  8. Vue 组件间传值

    前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...

  9. JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

    在WEB页面中,我们实现页面跳转的方法通常是用LINK,BUTTON LINK ,IMG LINK等等,由用户点击某处,然后直接由浏览器帮我们跳转. 但有时候,需要当某事件触发时,我们先做一些操作,然 ...

随机推荐

  1. sublime text3 verilog代码编写高级操作篇

    2018.10.21 好久没写博客了,这段时间一直在学习一直在沉淀,然而发现学的越多会的更少,只能快马加鞭吧! 博主从大一暑假接触FPGA,到现在快一年半了,时间恍逝.刚开始入门也是用的quartus ...

  2. iptables详解(5):iptables匹配条件总结之二(常用扩展模块)

    所属分类:IPtables  Linux基础 在本博客中,从理论到实践,系统的介绍了iptables,如果你想要从头开始了解iptables,可以查看iptables文章列表,直达链接如下 iptab ...

  3. 洛谷——P2341 [HAOI2006]受欢迎的牛//POJ2186:Popular Cows

    P2341 [HAOI2006]受欢迎的牛/POJ2186:Popular Cows 题目背景 本题测试数据已修复. 题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所 ...

  4. BZOJ 1444 [JSOI2009]有趣的游戏 (AC自动机、概率与期望DP、矩阵乘法)

    诶这题洛谷居然没有??? 题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1444 题解: 我见到主要有三种做法. 一是矩阵乘法.设\(d ...

  5. js调用ro的webservice

    Enabling JavaScript Access on the Server Drop the JavaScriptHttpDispatcher component onto the server ...

  6. [国家集训队2012]JZPFAR

    [国家集训队2012]JZPFAR 题目 平面上有n个点.现在有m次询问,每次给定一个点(px, py)和一个整数k,输出n个点中离(px, py)的距离第k大的点的标号.如果有两个(或多个)点距离( ...

  7. LA 4794 状态DP+子集枚举

    状态压缩DP,把切割出的面积做状态压缩,统计出某状态下面积和. 设f(x,y,S)为在状态为S下在矩形x,y是否存在可能划分出S包含的面积.若S0是S的子集,对矩形x,y横切中竖切,对竖切若f(x,k ...

  8. HDU 4540

    简单得不能再简单的DP了. #include<iostream> const int inf=1<<30; using namespace std; int map[22][2 ...

  9. 《Android源代码设计模式解析与实战》读书笔记(十八)

    第十八章.代理模式 代理模式也称托付模式,是结构型设计模式之中的一个.是应用广泛的模式之中的一个. 1.定义 为其它对象提供一种代理以控制对这个对象的訪问. 2.使用场景 当无法或不想直接訪问某个对象 ...

  10. STM32F407VG (五)定时器

    一.定时器节本分类和主要特点 1.STM32定时器分类: 1)看门狗定时器 2)SysTick定时器 3)RTC定时器 4)通用定时器 a)通用定时器TIM2~TIM5, 当中TIM2和TIM5是32 ...