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

Posted 2023-02-23

【中文标题】如何在 Vue.js 中访问可重用组件的其他实例的状态

【英文标题】：How can one access the state of other instances of a reusable component in Vue.js

【发布时间】：2021-08-17 17:46:55

【问题描述】：

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

【参考方案1】：

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

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