绘制图表类型选择以及界面变动（七）2021-07-13

最新推荐文章于 2025-11-07 11:14:55 发布

原创最新推荐文章于 2025-11-07 11:14:55 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了在Vue中如何处理图表类型的动态选择，并通过Vuex的状态管理来维护图表类型。当图表类型改变时，使用mutation更新state中的typeOfDiagram状态。同时，通过父组件作为媒介，利用$emit和ref实现兄弟组件stocktable和diagram之间的方法调用，以完成数据加载逻辑。这种方法遵循了Vue的组件通信原则，提高了用户体验。

对于要绘制的图表类型的选择进行了监听

在这里插入图片描述
对于此处选中的图表的类型，在store.state中维护了一个状态 typeOfDiagram
对应的mutation和action中的变更方法如下

muta_typeOfDiagram(state,result)
    {
        state.typeOfDiagram=result
    }

reset_typeOfDiagram(context,value){
        context.commit('muta_typeOfDiagram', value.typeOfDiagram)
    }

界面变动–使用父组件做媒介实现了兄弟组件的方法调用

为了更符合用户的操作逻辑，把diagram组件中的按钮移动到了stocktable组件中，这里就不得不面队一个兄弟组件方法调用的问题，在查阅了相关博客后，使用 $e m i t 和$ ref 完成了兄弟组件的通信，
参考的博客如下
vue兄弟组件之间传值和方法调用
在这里插入图片描述
实现的关键代码
发起调用的子组件1 stocktable.vue

 handleLoadData(){
                this.$emit("handleClickLoad")
            }

作为中介的父组件 index.vue
在子组件引入是注册监听方法和ref属性用于访问子组件
在这里插入图片描述
通过方法向子组件2 diagram发起方法调用被调用的方法为loadData（），此方法在子组件2 diagram中被调用