解决vue做详情页跳转的时候使用created方法 数据不会更新问题
版权申诉
78 浏览量
2020-11-20
01:40:01
上传
评论
收藏 79KB PDF 举报
解决解决vue做详情页跳转的时候使用做详情页跳转的时候使用created方法方法 数据不会更新数据不会更新
问题问题
大家在做项目的时候肯定会遇到携带某个参数跳转到详情页 然后取这个参数，下面是重点
刚开始我用cookie把这个参数存起来在详情页面取这个参数发现只有第一次取到的是正确的 你在回到父页面在点击进详情页
发现取到的数据跟原来的一模一样根本没有发生改变（因为router跳转时是不会刷新页面的所以导致我取得值永远不能更
新），我以为是cookie有问题了后来又用了query携带参数跳转，sessionStorage方法存取发现都不行，
看下图解决办法看下图解决办法
我也不知道其中是什么原理 没搞明白 但是解决了问题了，看了文档还是没理解这两个方法具体区别。
补充知识：补充知识：vue中子组件的中子组件的created、、mounted钩子中获取不到钩子中获取不到props中的值问题中的值问题
父子组件通信父子组件通信
这个官网很清楚，也很简单，父组件中使用v-bind绑定传送，子组件使用props接收即可
例如：
父组件中父组件中
<template>
<div>
<head-top></head-top>
<section class="data_section">
<header class="chart-title">数据统计</header>
<el-row :gutter="20" class="chart-head">
<el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head blue-head">统计：</div></el-col>
<el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">销售数量 <span>{{number}}</span></div></el-col>
<el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">销售金额 <span>{{amount}}</span></div></el-col>
<el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">利润统计 <span>{{profits}}</span></div></el-col>
</el-row>
</section>
<chart :chartData="chartData"></chart>
</div>
</template>
<script>
data(){
return {
number: null,
amount: null,
profits: null,
chartData: [10,10,10] }
},
</script>
子组件中子组件中
export default {
props: ['chartData'] }
评论0
最新资源