顶部菜单切换通过传递不同参数在同一组件内展示不同内容

作者: Eastblue | 来源:发表于2018-04-04 10:32 被阅读0次

图1

开始想着在顶部在每个菜单项写一个组件，然后在不同组件内请求参数。这个问题本可以通过写一个组件然后通过传递动态参数解决，但是由于请求数据一直写在mounted里面，点击上面菜单项不刷新页面导致mounted不能更新而作罢。

后来我想这通过vuex，在vuex 的state里面定义一个参数，如下图所示

在点击dom上面通过 this.$store.state("changeNavId",item),触发vuex里面的changeNavId函数，并且把item传到vuex里面。

此时你需要的数据全部保存在vue里面，那么重点来了，如何从vuex里卖弄获取数据并且动态的请求参数呢！！！

这个时候我想到了vue watch,可以动态的data里面属性值的变化，可是我们需要监听vuex传递过来参数的变化，又该如何做呢，不卖关子了。

我们可以加一个计算属性，watch是可以监听计算属性的。如下图所示

这样就实现了在一个组件内通过监听vuex里面state值的变化传递不同参数从而获取到不同数据

如果大家觉得我谢谢的对你们有所启发，请不要吝啬点个赞吧

网友评论

本文标题：顶部菜单切换通过传递不同参数在同一组件内展示不同内容

本文链接：https://www.haomeiwen.com/subject/sqfkhftx.html

顶部菜单切换通过传递不同参数在同一组件内展示不同内容