【Vue】vuecli父向子传递数据,并且通过sessionStorage保存当前状态

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33744228/article/details/80695073

下图部分打码(职业操守),点击产业时会有一个下拉并且底部会有一个黄色线条,选择对应的选项,跳转到对应产业的分类页面

说明

这里导航栏是一个组件,中间内容也是一个组件,里面包含了1,2,3三个板块,是通过v-if判断显示,所以需要通过父传值到子组件中来判断是选择的是哪一个产业。而且这时候如果你刷新了的话,值会恢复到默认值,底部分黄线就会跑到第一个首页的下面,下面也是一样黄线会跑到1号下面
这里写图片描述


下面我写了一个demo(样式没有过多修饰):
这里写图片描述
结构:
1:按钮一,二,三对应上面的产业的下拉选项
2:list 一,二,三对应下面的1,2,3三个板块
3:第一,第二,第三···等等就是所属板块的内容了

目的

1:选择对应按钮,显示对应list内容
2:刷新后保存当前状态,显示的还是当前内容,.active样式也是一样

父组件:

<template>
  <div class="hello">
    <button @click="goto(0)" :class="[msg === 0 ? 'active':'']">按钮一</button>
    <button @click="goto(1)" :class="[msg === 1 ? 'active':'']">按钮二</button>
    <button @click="goto(2)" :class="[msg === 2 ? 'active':'']">按钮三</button>
    <son :father = 'msg'></son>         //这里的father是子组件中的props,msg是父组件的值
  </div>
</template>
<script>
import son from './test/test'
export default {
  components: {
    son
  },
  data () {
    return {
      msg: 0
    }
  },
  methods: {
    goto (val) {
      this.msg = val
      sessionStorage.setItem('findex', val)
    }
  },
  mounted () {
    if (sessionStorage.index) {
      this.msg = parseInt(sessionStorage.findex)
    } else {
      this.msg  = 0
    }
  }
}
</script>
<style>
.active{
  background: red;
}
</style>

注释:

  • 添加子组件并且命名son
  • :father是子组件中的props,msg是父组件data的值需要传给子组
  • sessionStorage.setItem('findex', val) 用来存储当前选中的状态
  • created 实例创建后:判断是否有缓存,如果有就获取缓存中的findex保存当前状态

子组件:

<template>
  <div class="test">
      <h1 @click="change(0)" :class = "[index === 0 ? 'active':'']">list 一</h1>
      <h1 @click="change(1)" :class = "[index === 1 ? 'active':'']">list 二</h1>
      <h1 @click="change(2)" :class = "[index === 2 ? 'active':'']">list 三</h1>
    <div class="list" v-if="index === 0">
      <ul>
        <li><a >第一个</a></li>
        <li><a >第二个</a></li>
        <li><a >第三个</a></li>
      </ul>
    </div>
    <div class="list" v-if="index === 1">
      <ul>
        <li><a >第4个</a></li>
        <li><a >第5个</a></li>
        <li><a >第6个</a></li>
      </ul>
    </div>
    <div class="list" v-if="index === 2">
      <ul>
        <li><a >第7个</a></li>
        <li><a >第8个</a></li>
        <li><a >第9个</a></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ['father'],
  data () {
    return {
      index: this.father
    }
  },
  methods: {
    change (val) {
      this.index = val
      sessionStorage.setItem('index', this.index)
      console.log(sessionStorage)
    }
  },
  created () {
    if (sessionStorage.index) {
      this.index = parseInt(sessionStorage.index)
    }
  },
  watch: {
    father (val) {
      this.index = this.father
      sessionStorage.setItem('index', this.father)
    }
  }
}
</script>
<style scoped>
.active{
  border:1px solid #000;
  color: #000 !important;
}
h1{
  display: inline-block;
  margin-right: 20px;
}
</style>

注释:

  • 子组件注册props使我们可以在组件上注册一些自定义特性
  • father是子组件中的props的属性
  • 通过sessionStorage.setItem('index', this.father) 同父组件一样用来存储当前选中的状态
  • created 实例创建后:判断是否有缓存,如果有就获取缓存中的index保存当前状态
    -change事件每次点击之后也通过sessionStorage保存当前选中的状态

至此效果以实现,刷新也可以保存当前状态

刷新状态:
这里写图片描述
加载完毕:
这里写图片描述

阅读更多

没有更多推荐了,返回首页