初学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: ,
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: ,
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页面传值的两种方法，欢迎补充指正！
/****************************我是可爱的分割线********************************/