vue引入id3_Vue页面间传值，客户端数据存储，以及父子组件间props传值
初學Vue，遇到了頁面傳值的問題，大概網上學習了解了一下，在此跟大家分享一下學習心得，歡迎批評指正。
一.參數傳值
如果是簡單的頁面傳值，比如傳一個id到詳情頁等等，推薦使用參數傳值。
這里頁面是通過路由跳轉的，所以參數傳值有兩種方法，也就是借助$router的兩個參數【params】和【query】。
頁面跳轉的話，可以通過頁面路由的名稱name或路徑path去定義目標頁面。
定義一個v-on:click="turnToPost(item.id)” 方法，進行頁面跳轉和傳值。
傳值頁面：
…………
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 }
});
}
}
};
取值頁面：
mounted：el掛載到實例上后調用，一般第一個業務邏輯會在這里開始。所以我們把取值放到mounted()函數中。
about
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: {}
};
控制臺輸出的結果如下圖：
二.緩存傳值
通過localStorage和sessionStorage存儲一個全局變量，在任何地方都可以取用。
傳值頁面：
…………
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用其一就可以
});
}
}
};
取值頁面：
about
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: {}
};
控制臺輸出結果如下圖：
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"，并顯示在頁面上。
{{msg}}
name:'about',
props: ['msg']
}
父頁面(App.vue)：
1.在父頁面中引入about組件
import about from './views/About'
components: {
'about': about
}
2.在使用子組件的地方傳值
把父頁面的parentMsg賦值給子組件的msg，當parentMsg值變化時，msg也會發生變化。
data () {return{
parentMsg:'test'}
},
components: {'about': about
}
}
演示圖如下：
以上就是Vue頁面傳值的兩種方法，歡迎補充指正！
/****************************我是可愛的分割線********************************/
總結
以上是生活随笔為你收集整理的vue引入id3_Vue页面间传值，客户端数据存储，以及父子组件间props传值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 知乎如何删除自己的问题(知乎的知+是什么
- 下一篇： vue2中的过滤器filter怎样实现首