初學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除非主動刪除數據，否則數據永遠不會消失。
手動移除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頁面傳值的兩種方法，歡迎補充指正！
/****************************我是可愛的分割線********************************/
