获取一个 vue 组件的所有实例并在每个实例上运行一个函数

Question

我有一个名为 Dropdown 的组件。

我通过点击事件触发特定实例：

<button @click.stop="$refs.notificationsDropdown.toggleDropdown()"></button>

触发器

<dropdown ref="notificationsDropdown"></dropdown>

toggleDropdown 函数只是更改 data 中的一个布尔值，如果 true 则显示一个 div。

在此值设置为 true 之前，我想获取 Dropdown 的所有实例并将此值设置为 false，以便在新的下拉菜单打开之前关闭所有其他下拉菜单。

如何获取Dropdown 的所有实例并在每个实例上运行一个函数以关闭它们的下拉列表？

Answer 1

看起来Vuex state 可以提供帮助。您可以将data 中的布尔值更改为compute 值。
在下拉列表中：

  computed: {
    isShowed: function() {
      return this.$store.state.activeDropdown === this;
    }
  },
  methods: {
    toggleDropdown: function() {
      if (this.$store.state.activeDropdown === this) {
        this.$store.state.activeDropdown = null;
      } else {
        this.$store.state.activeDropdown = this;
      }
    }
  }