Vue 3父组件调用多子组件方法异常：FAQ页面「展开全部」按钮仅生效最后一个折叠面板问题

这是Vue开发里很常见的ref使用误区——你用了单个ref变量去绑定所有的CollapsiblePanel子组件。在Vue的规则里，当同一个ref被重复绑定到多个组件/元素上时，只有最后一个组件的实例会被保留在ref中，前面的实例都会被覆盖掉。这就是为什么点击「View All」按钮时，只有最后一个子组件响应的原因。

要让所有子组件都能被调用到，你需要把ref定义成数组类型。Vue会自动将每个绑定了该ref的子组件实例依次存入数组，之后我们只需要遍历数组，调用每个实例的expandAll方法即可。

修改后的父组件脚本 #

import CollapsiblePanel from '@/components/CollapsiblePanel';
import { ref } from 'vue';

// 将ref声明为数组，初始值为空数组
const collapsiblePanelRef = ref([]);

function expand() {
  // 遍历数组，逐个调用子组件的expandAll方法
  collapsiblePanelRef.value.forEach(panel => {
    // 可选链操作符避免可能的空值报错
    panel?.expandAll();
  });
}

修改后的父组件模板 #

<a @click="expand">View All</a>
<!-- 每个子组件依然绑定同一个ref，Vue会自动填充数组 -->
<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>

子组件代码确认 #

你的子组件代码是正确的，只要确保已经通过defineExpose暴露了expandAll方法即可：

import { ref } from 'vue';

const isActive = ref(false);

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

// 必须暴露方法，父组件才能调用
defineExpose({ expandAll });

这样修改后，点击「View All」按钮时，所有的折叠面板都会同时展开了。

内容的提问来源于stack exchange，提问作者Travis