时间戳

首页 > 解决方案 > 如何在 Vue.js 中访问可重用组件的其他实例的状态

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

问题描述

作为 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>

标签： vue.jscomponentsvue-componentcode-reuse

解决方案

您可以更改open为道具，然后您可以activeAccordianId: 1在父级中执行类似的操作并让道具成为

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

推荐阅读