vuex---兄弟组件间传值

需求描述:

如下图:TopHeader组件需要获取leftNav中点击的菜单的菜单名称,当leftNav中点击菜单时,把相应的菜单名称显示在topHeader中

解决方法:

借助vuex,解决方法如下步骤:

1、安装vuex,命令为【npm install vuex --save】

2、创建store:在项目【src】目录下新建文件夹【store】及【store】下新建文件【index.js】。初始化state对象。【currentMenu】变量用于存储当前显示菜单页的名称。

3、在【main.js】中注册store 

4、leftNav组件中定义菜单点击方法,并在该方法中将菜单名参数传递给store.js中state对象中的【currentMenu】变量

5、在topHeader组件中引入【currentMenu】

发布了147 篇原创文章 · 获赞 33 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/maidu_xbd/article/details/103281157
今日推荐