Vue中v-for循环Tab组件时useSlots报读取title的null错误求助

问题根源 #

用v-for循环渲染Tab时，组件初始化阶段slots.default()可能返回null，或者返回的数组包含未渲染完成的空节点，直接调用map读取tab.props.title就会触发Cannot read properties of null错误。另外原代码用ref初始化tabTitles只会执行一次，无法响应cars数组变化带来的Slot内容更新。

修改方案 #

将原tabTitles的定义替换为以下代码（需先导入computed）：

<script setup>
import { ref, useSlots, provide, computed } from "vue";

const slots = useSlots();
// 修改后的tabTitles处理逻辑
const tabTitles = computed(() => {
  // 安全获取默认Slot，不存在则返回空数组
  const defaultSlotItems = slots.default?.() || [];
  // 过滤空节点后提取每个Tab的title属性
  return defaultSlotItems
    .filter(item => item)
    .map(tab => tab.props.title);
});

// 处理tabTitles为空的情况，避免selectedTitle取到undefined
const selectedTitle = ref(tabTitles.value[0] || "");

provide("selectedTitle", selectedTitle);
</script>

关键改动说明 #

• 用computed替代ref：确保tabTitles能响应Slot内容的动态变化（比如cars数组更新时），自动重新计算标题列表。
• 多层空值防护：
  • 通过slots.default?.()判断Slot是否存在，避免调用不存在的函数报错；
  • 用filter(item => item)过滤Slot数组中的空节点，防止访问null的props属性。
• 初始化selectedTitle时增加空值判断：避免没有Tab组件时，tabTitles.value[0]为undefined引发的异常。

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