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

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

说明

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

---

下面我写了一个demo（样式没有过多修饰）：

结构：
1：按钮一，二，三对应上面的产业的下拉选项
2：list 一，二，三对应下面的1,2,3三个板块
3：第一，第二，第三···等等就是所属板块的内容了

目的

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

父组件：

注释：

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

子组件：

注释：

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

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

刷新状态：

加载完毕：