Vue JS 3父调用多个子方法

Question

我有一个常见问题解答的父页面和折叠问答的子组件。但是在常见问题页面上，我们有一个按钮来展开所有常见问题。所以我试图在子组件上调用一个方法，我们将有十几个这样的子组件。但是当我单击查看全部时，它只会打开最后一个子组件。为什么它只击中最后一个组件而不是所有组件？

import CollapsiblePanel from '@/components/CollapsiblePanel';

// Imports
import { ref } from 'vue';

const collapsiblePanelRef = ref();

function expand() {
    collapsiblePanelRef.value.expandAll()
}

然后用子引用标记...

 <a @click="expand">View All</a>
 <CollapsiblePanel ref="collapsiblePanelRef">
     <template v-slot:title>
         Sample title 1
     </template>
     <template v-slot:content>
        Lorem ipsum 1
     </template>
 </CollapsiblePanel>
 <CollapsiblePanel ref="collapsiblePanelRef">
     <template v-slot:title>
         Sample title 2
     </template>
     <template v-slot:content>
        Lorem ipsum 2
     </template>
 </CollapsiblePanel>

那么 CollapsiblePanel 看起来像......

function expandAll() {
    isActive.value = true;
}

defineExpose({
    expandAll
})

Answer 1

我不知道为什么只有最后一个打开的确切答案，但我宁愿用道具来做这个。在父模板中：

<a @click="expandAll">View All</a>     
<CollapsiblePanel :open="openAll">
    ...
</CollapsiblePanel>
<CollapsiblePanel :open="openAll">
    ...
</CollapsiblePanel>

父级按钮的功能：

const openAll = ref(false);

function expandAll() {
    openAll.value = !openAll.value;
}

比在 CollapsiblePanel 脚本设置中：

const props = defineProps({openAll: Boolean});
const currentOpen = ref(false);

/// Call with click on child:
const toggleIndividual = () => {
    currentOpen.value = !currentOpen.value;
}
/// If prop changes (expand all button is clicked) open child
watch(props.openAll) {
   currentOpen.value = true;
}

并且在 CollapsiblePanel 模板中需要打开和关闭的 div 上的 v-if="currentOpen"。您可以将@click="toggleIndividual" 放在要单击以展开它的元素上。

现在，如果您切换全部展开，所有子项都会展开。如果单击单个子项，它将折叠。

希望这会有所帮助。