如何解决如何在 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>
解决方法
您可以将 open
更改为一个道具,然后您可以在父级中执行类似 activeAccordianId: 1
的操作并让该道具成为
<accordian :open="activeAccordianId === 1" />
<accordian :open="activeAccordianId === 2" />
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。