如何使用MDB Vue实用地打开Vue中另一个组件的下拉列表

Question

单击模态按钮后，我试图打开MDB下拉菜单。模态是一个单独的组件。如何在两个组件之间进行通信？

<mdb-dropdown>
                <!-- Shopping Cart Button -->
                <mdb-dropdown-toggle class="pl-0" ref="toggle" slot="toggle">
                    <a>
                        <span class="fa-stack">
                            <i class="fa fa-shopping-cart fa-stack-2x"></i>
                            <i id="cartTotal" style="font-size: 14px;" class="fa fa-stack-1x">{{$store.state.cartLength}}</i></span>
                    </a>
                </mdb-dropdown-toggle>

我能够通过使用在同一组件中打开它，并且它可以工作，但是我必须能够从另一个组件中打开它：

 mounted() {   
    this.$refs.toggle.$el.click();
  }

提前感谢

Answer 1

要在组件之间实现这种通信，可以使用事件总线或Vuex。由于您已经在使用后者，因此请在商店中将状态添加为showDropDown:false，然后继续执行以下操作：

1. 在包含按钮的组件中，您需要分派click上的操作以将状态更改为true。
2. 在包含下拉菜单的组件中，您需要为添加的状态添加...mapState，因此您可以根据此变量将v-if下拉菜单。
3. 不要忘记调度另一个在下拉列表关闭时将状态返回false的动作。