vue引入id3_Vue页面间传值，客户端数据存储，以及父子组件间props传值
初學(xué)Vue，遇到了頁(yè)面?zhèn)髦档膯?wèn)題，大概網(wǎng)上學(xué)習(xí)了解了一下，在此跟大家分享一下學(xué)習(xí)心得，歡迎批評(píng)指正。
一.參數(shù)傳值
如果是簡(jiǎn)單的頁(yè)面?zhèn)髦?#xff0c;比如傳一個(gè)id到詳情頁(yè)等等，推薦使用參數(shù)傳值。
這里頁(yè)面是通過(guò)路由跳轉(zhuǎn)的，所以參數(shù)傳值有兩種方法，也就是借助$router的兩個(gè)參數(shù)【params】和【query】。
頁(yè)面跳轉(zhuǎn)的話，可以通過(guò)頁(yè)面路由的名稱name或路徑path去定義目標(biāo)頁(yè)面。
定義一個(gè)v-on:click="turnToPost(item.id)” 方法，進(jìn)行頁(yè)面跳轉(zhuǎn)和傳值。
傳值頁(yè)面：
…………
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) {//參數(shù)傳值
this.$router.push({
name:"about",//頁(yè)面//path: '/blog/about',//name和path用其一就可以
params: { id: id, postList:JSON.stringify(this.postList) },
query: { id: id }
});
}
}
};
取值頁(yè)面：
mounted：el掛載到實(shí)例上后調(diào)用，一般第一個(gè)業(yè)務(wù)邏輯會(huì)在這里開(kāi)始。所以我們把取值放到mounted()函數(shù)中。
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: {}
};
控制臺(tái)輸出的結(jié)果如下圖：
二.緩存?zhèn)髦?/p>
通過(guò)localStorage和sessionStorage存儲(chǔ)一個(gè)全局變量，在任何地方都可以取用。
傳值頁(yè)面：
…………
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) {//緩存?zhèn)髦?/p>
localStorage.setItem('id',id);
sessionStorage.setItem('id',id);this.$router.push({
name:"about",//頁(yè)面//path: '/blog/about',//name和path用其一就可以
});
}
}
};
取值頁(yè)面：
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: {}
};
控制臺(tái)輸出結(jié)果如下圖：
Ps.
1.localStorage和sessionStorage的存儲(chǔ)數(shù)據(jù)大小一般都是5MB,且存儲(chǔ)在客戶端，不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器。
2.localStorage的生命周期是永久的，關(guān)閉頁(yè)面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會(huì)消失。localStorage除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失。
sessionStorage的生命周期是僅在當(dāng)前會(huì)話下有效。sessionStorage引入了一個(gè)“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)。只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉，即使刷新頁(yè)面或者進(jìn)入同源另一個(gè)頁(yè)面，數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會(huì)被銷毀。
手動(dòng)移除localStorage和sessionStorage緩存方法：
//根據(jù)鍵刪除緩存
localStorage.removeItem('id');
sessionStorage.removeItem('id');//刪除所有緩存數(shù)據(jù)
localStorage.clear();
sessionStorage.clear();
3.localStorage和sessionStorage只能存儲(chǔ)字符串類型，對(duì)于復(fù)雜的對(duì)象可以使用ECMAScript提供的JSON對(duì)象的stringify和parse來(lái)處理。
Ps.
this.$nextTick():將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。監(jiān)測(cè)DOM更新完成，再請(qǐng)求數(shù)據(jù)，所以應(yīng)該放到請(qǐng)求的回調(diào)函數(shù)里面。
三. 組件傳值
子組件頁(yè)面(About.vue)：
在子組件中，props中定義想要從父頁(yè)面?zhèn)鬟^(guò)來(lái)的值，此處定義了一個(gè)"msg"，并顯示在頁(yè)面上。
{{msg}}
name:'about',
props: ['msg']
}
父頁(yè)面(App.vue)：
1.在父頁(yè)面中引入about組件
import about from './views/About'
components: {
'about': about
}
2.在使用子組件的地方傳值
把父頁(yè)面的parentMsg賦值給子組件的msg，當(dāng)parentMsg值變化時(shí)，msg也會(huì)發(fā)生變化。
data () {return{
parentMsg:'test'}
},
components: {'about': about
}
}
演示圖如下：
以上就是Vue頁(yè)面?zhèn)髦档膬煞N方法，歡迎補(bǔ)充指正！
/****************************我是可愛(ài)的分割線********************************/
總結(jié)
以上是生活随笔為你收集整理的vue引入id3_Vue页面间传值，客户端数据存储，以及父子组件间props传值的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 知乎如何删除自己的问题(知乎的知+是什么
- 下一篇： vue2中的过滤器filter怎样实现首