如何在Vue.js中访问可重用组件的其他实例的状态？

Question

作为Vue的新手，我们遇到了下面的用例。我有一个手风琴组件，可以在整个应用程序中重用。手风琴只是隐藏和揭示任何包裹在里面的东西。

当我打开一个实例时，如何能够关闭任何其他打开的实例?例如，如果原型手风琴是打开的，那么单击函数和对象，就应该关闭，原型手风琴应该关闭。

​

const vue = Vue.createApp({});

vue.component('accordion', {
  data() {
    return {
      open: false,
    }
  },
  methods: {
    toggle() {
      this.open = !this.open;
    },
  },
  template: `
    <div class="accord">
      <p @click="toggle" class="accord-header">Click me to open and close!</p>
      <div v-if="open" class="accord-body">
        <slot></slot>
      </div>
    </div>
  `,
})

vue.mount('#main-app');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#main-app {
  width: 50%;
  margin: 0 auto;
}

.accord {
  padding: 4px;
  cursor: pointer;
}
.accord-header {
  text-align: center;
  padding: 4px 0;
}
.accord-body {
  background-color: #eee;
  padding: 8px;
}

<script src="https://unpkg.com/vue@next"></script>

<div id="main-app">
  <accordion>
    <p class="accord-text">Javascript Proptotypes and inheritance</p>
  </accordion>
  <accordion>
    <p class="accord-text">Scopes and Closures</p>
  </accordion>
  <accordion>
    <p class="accord-text">Functions and Objects</p>
  </accordion>
</div>

​

Answer 1

您可以将open更改为一个道具，然后可以在父程序中执行类似activeAccordianId: 1的操作，并将其设置为

<accordian :open="activeAccordianId === 1" />
<accordian :open="activeAccordianId === 2" />
...