Svelte使用<svelte:component>时未使用导出属性警告的解决方法

在Svelte开发中，我常会通过<svelte:component>向子组件传递一套标准属性，但部分子组件并不需要其中某些属性，这带来了几种棘手的选择：

• 不在导出列表中声明无需的属性，会触发Svelte警告：[component] was created with unknown prop..
• 声明无需的属性但不使用，会触发Svelte警告：[component] has unused export property...
• 声明无需的属性并随意引用以消除警告，这种方式十分丑陋
• 声明无需的属性并设默认值为undefined，仍不够优雅；新增通用属性时需同步添加到所有无关组件

我希望在使用<svelte:component>传递通用属性的特定场景下允许存在未知props，而非全局禁用警告。以下是简化的代码示例：

App.svelte #

<script>
  import PanelSet from './PanelSet.svelte' // 可复用的通用面板组件

  import Header from './PanelHeader.svelte' // 应用特定组件
  import ViewSelector from './PanelViewSelector.svelte' // 应用特定组件
  import ViewSet from './PanelViewSet.svelte'// 应用特定组件

  let panels=[]

  let globalProps={
    // 各类属性
  }
</script>

<PanelSet
    HeaderComponent={Header}
    ViewSelectorComponent={ViewSelector}
    ViewSetComponent={ViewSet}
    {accessorDelegates}
    {globalProps}
    bind:panels
/>

PanelSet.svelte #

<script>
  // 接收作为props传入的组件
  export let HeaderComponent={}
  export let ViewSelectorComponent={}
  export let ViewSetComponent={}

  export let panels=[], accessorDelegates, globalProps
</script>
<!-- CSS网格布局：行对应面板，列对应窗格 -->
<div id="frame" class="frame"
     style="grid-template-columns: {collapsiblePanelColumnWidths[0]}em {collapsiblePanelColumnWidths[1]}em {fixedColumnWidthCSS};
            grid-template-rows: repeat({panels.length},calc(100%/{panels.length}))">

  <!-- 为每个面板添加一行 -->
  {#each panels as panel (panel.id) }
    <Panel
       {panel}
       {HeaderComponent}
       {ViewSelectorComponent}
       {ViewSetComponent}
       {accessorDelegates}
       {globalProps}
    />
  {/each}
</div>

<style>
  .frame {
    height:100%;
    display:grid;
  }
</style>

Panel.svelte #

<script>
  export let panel
  export let HeaderComponent={}
  export let ViewSelectorComponent={} // 传入PanelViewSelector组件
  export let ViewSetComponent={}      // 传入PanelViewSet组件
  export let accessorDelegates, globalProps
</script>

<!-- 头部组件 -->
<div class="header collapsible">
  <svelte:component this={HeaderComponent} {panel} {accessorDelegates} {globalProps} />
</div>

<!-- 视图选择器组件 -->
<div class="viewbuttonbox collapsible">
  <svelte:component this={ViewSelectorComponent} {panel} {accessorDelegates} {globalProps} />
</div>

<!-- 视图集合组件 -->
<div class="viewset">
  <svelte:component this={ViewSetComponent} {panel} {accessorDelegates} {globalProps} />
</div>

PanelViewSelector.svelte #

<script>
  export let panel, accessorDelegates // 触发警告：组件创建时包含未知prop 'globalProps'
  //  ... 业务逻辑 ... 无需使用globalProps
</script>

PanelViewSet.svelte #

<script>
  export let panel, accessorDelegates, globalProps
  //  ... 业务逻辑 ... 需要使用globalProps
</script>

注：我使用<svelte:component>是因为无法从App.svelte通过插槽实现，插槽要求在App.svelte中调用每个组件实例，而PanelSet负责创建多个面板及对应组件实例。我也不想将所有props合并为单个对象，避免不必要的响应式更新。

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