Vue引入组件未渲染且无报错问题排查求助

安全阿岳

2026-10-1

问题排查及修复方案

核心问题1：父组件语法结构错误

你提供的父组件（File I'm Importing Into.vue）script部分存在语法错误，直接导致组件注册逻辑失效：

export default 内部在props定义结束后多了一个多余的闭合大括号 }，打断了后续components、methods的注册逻辑
props定义不符合Vue规范，不能直接赋值作为默认值，需要按类型声明：

// 修正后的props定义
props: {
  bordered: {
    type: Boolean,
    default: true
  },
  striped: {
    type: Boolean,
    default: true
  },
  participants: {
    type: Array,
    default: () => []
  }
}

核心问题2：组件嵌套逻辑错误

你在外层已经写了一个b-table，又将自带完整b-table结构的InternalTable塞入外层b-table的默认插槽，而Buefy的b-table默认插槽仅识别b-table-column作为有效子元素，插入完整表格组件本身就是无效写法。
你完全不需要外层的b-table，直接使用InternalTable即可，同时注意给InternalTable传递必填的participants属性：

<!-- 修正后的父组件template -->
<template>
  <div>
    <InternalTable :participants="participants">
      <!-- 这里可以放操作列的自定义内容，对应InternalTable预留的slot -->
    </InternalTable>
  </div>
</template>

核心问题3：InternalTable内部调用错误

InternalTable内的列标签直接调用了t()方法，但是从你的其余代码看你全局挂载的是I18n对象，所有翻译调用应该统一为I18n.t()，否则会抛出未定义错误，如果是生产环境可能被吞掉无提示：

<!-- 修正前 -->
<b-table-column field="primaryAlias" :label="t('participant.table.primary_alias')" v-slot="props">
<!-- 修正后 -->
<b-table-column field="primaryAlias" :label="I18n.t('participant.table.primary_alias')" v-slot="props">