Vue页面间传值，客户端数据存储，以及父子组件间props传值

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

 

一.参数传值

若是是简单的页面传值，好比传一个id到详情页等等，推荐使用参数传值。

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

页面跳转的话，能够经过页面路由的名称name或路径path去定义目标页面。

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

传值页面：

 <template>
   <div>
     <el-card class="post-card" v-for="item in postList" v-bind:key="item.id" v-on:click="turnToPost(item.id)">
       …………
     </el-card>
   </div>
 </template>
 
 <script>
 
 export default {
   data() {
     return {
         postList: [
         {
           id: 1,
           title: "I’ll think of you every step of the way.",
           time: "JANUARY 05, 2019",
           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"
         },…………
       ]
     };
   },
   methods: {
     turnToPost: function(id) {
       //参数传值
       this.$router.push({
         name: "about",//页面
         //path: '/blog/about',//name和path用其一就能够
         params: { id: id, postList:JSON.stringify(this.postList) },
         query: { id: id }
       });
     }
   }
 };
 </script>

 

取值页面：

mounted：el挂载到实例上后调用，通常第一个业务逻辑会在这里开始。因此咱们把取值放到mounted()函数中。

<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted: function() {
    this.$nextTick(function() {
      let id = this.$route.params.id; //params
      let posts = JSON.parse(this.$route.params.postList);
      let id2 = this.$route.query.id; //query
      console.log("$route", this.$route);
      console.log("params", id);
      console.log("query", id2);
      console.log("posts", posts);
    });
  },
  methods: {}
};
</script>

 

控制台输出的结果以下图：

 

 二.缓存传值

经过localStorage和sessionStorage存储一个全局变量，在任何地方均可以取用。

传值页面：

 <template>
   <div>
     <el-card class="post-card" v-for="item in postList" v-bind:key="item.id" v-on:click="turnToPost(item.id)">
       …………
     </el-card>
   </div>
 </template>
 
 <script>
 
 export default {
   data() {
     return {
         postList: [
         {
           id: 1,
           title: "I’ll think of you every step of the way.",
           time: "JANUARY 05, 2019",
           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"
         },…………
       ]
     };
   },
   methods: {
     turnToPost: function(id) {
　　   //缓存传值
      localStorage.setItem('id',id);
      sessionStorage.setItem('id',id);
       this.$router.push({
         name: "about",//页面
         //path: '/blog/about',//name和path用其一就能够
       });
     }
   }
 };
 </script>

 

取值页面：

<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted: function() {
    this.$nextTick(function() {
      let id3 = localStorage.getItem("id"); //localStorage
      let id4 = sessionStorage.getItem("id"); //sessionStorage
      console.log("localStorage", id3);
      console.log("sessionStorage", id4);
    });
  },
  methods: {}
};
</script>

 

控制台输出结果以下图：

 

 Ps.

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

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

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

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

//根据键删除缓存
localStorage.removeItem('id');
sessionStorage.removeItem('id');
//删除全部缓存数据
localStorage.clear();
sessionStorage.clear();

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

 

Ps.

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

 

三. 组件传值

子组件页面（About.vue）：

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

<template>
  <div class="about">
    <h1>{{msg}}</h1>
  </div>
</template>
<script>
export default {
  name: 'about',
  props: ['msg']
}
</script>

 

父页面（App.vue）：

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

import about from './views/About'

components: {
    'about': about }

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

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

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

<template>
  <div>
    <el-input v-model="parentMsg"></el-input>
    <about :msg="parentMsg"></about>
  </div>
</template>

<script>
import about from './views/About'

export default {
  data () {
    return {
      parentMsg: 'test'
    }
  },
  components: {
    'about': about
  }
}
</script>

 

演示图以下：

 

 

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

 

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