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頁面傳值的兩種方法，歡迎補充指正！

 

/****************************我是可愛的分割線********************************/