【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保存当前选中的状态

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

刷新状态：

加载完毕：