Vue/Nuxt 3从父级折叠组件函数

Question

我使用vue3创建了一个可重用的Collapse组件。它按预期工作。我遇到的问题是，我需要从父级/页面控制2个折叠实例。我可以让父对象使用道具切换特定的折叠，但如果我从父对象切换，然后在自身上切换折叠，则父对象现在需要单击两次才能再次切换。我假设数据实际上没有更新？不确定是否有更好的方法可以在不进入状态管理解决方案的情况下做到这一点。

折叠.vue

<script setup>
const props = defineProps({
title: {
type: String,
required: true,
},
collapsed: {
type: Boolean,
default: false,
},
});
const isOpen = ref(props.collapsed);
watch(
() => props.collapsed,
(newValue) => {
isOpen.value = newValue;
}
);
const toggleCollapse = () => {
isOpen.value = !isOpen.value;
};
</script>
<template>
<div class="flex flex-col ml-[20px] mb-2">
<button
@click="toggleCollapse"
class="text-left flex items-center relative font-source text-[19px] sm:text-[16px] lg:text-[19px] mb-2 font-semibold"
>
<IconCSS
:class="{ 'rotate-90': isOpen }"
class="text-3xl text-green absolute -left-7"
name="mdi:chevron-right"
/>
{{ title }}
</button>
<div v-if="isOpen">
<slot name="collapseContent"></slot>
</div>
</div>
</template>

父

<script setup>
const collapsePanels = ref([
{ id: 0, isVisible: false },
{ id: 1, isVisible: false },
{ id: 2, isVisible: false }
]);
const openCollapse = (id) => {
collapsePanels.value.forEach((el, index) => {
if (id === index) {
el.isVisible = !el.isVisible;
}
});
};
</script>
<template>
<button @click="openCollapse(0)">Toggle Panel One</button>
<button @click="openCollapse(2)">Toggle Panel Three</button>
<Collapse :collapsed="collapsePanels[0].isVisible" title="Collapse One">
<template v-slot:collapseContent>
<p>Collpase One Content</p>
</template>
</Collapse>
<Collapse title="Collapse Two">
<template v-slot:collapseContent>
<p>Collpase Two Content</p>
</template>
</Collapse>
<Collapse :collapsed="collapsePanels[2].isVisible" title="Collapse Three">
<template v-slot:collapseContent>
<p>Collpase Three Content</p>
</template>
</Collapse>

Answer 1

您应该将状态存储和控制在一个地方，并使用事件在组件之间进行通信。

添加id道具

const props = defineProps({
id: {
type: Number,
required: true,
},
...

以及Collapse.vue中的toggle事件

const emit = defineEmits(['toggle'])
const toggleCollapse = () => {
emit('toggle', props.id)
};

然后将父应用程序中的事件与@toggle="toggleCollapse"一起使用

<Collapse :id="0" @toggle="toggleCollapse"...

和在<setup>中

const toggleCollapse = (id) => {
openCollapse(id)
}

这是正在工作的SFC游乐场