如何将模板外创建的Vue组件传入具名插槽todisplay？

我的需求如下：

• display 和 display-two 组件需要访问Provider提供的计算成本较高的数据，因此仅在需要时才实例化Provider
• display-three 组件无需使用Provider提供的数据
• 由于实际场景限制，无法将Provider和display-three放置在Displayer组件内部
• 当需要显示display、display-two或display-three时，希望将对应组件传入Displayer组件的具名插槽todisplay中，想确认该方案是否可行及具体实现方法

以下是参考代码：

App.vue #

<template>
  <button @click="rotate">Rotate</button>
  
  <displayer>
    <template #todisplay>
      <!-- either display, display-two, or display-three displayed ONLY here -->
    </template>
  </displayer>  

  <provider v-if="providerDisplay">
    <display v-if="which === 0" />
    <display-two v-if="which === 1" />
  </provider>

  <display-three v-if="which === 2" />
  
</template>


<script setup>
import { ref, computed } from 'vue'

const which = ref(0)

import Provider from './Provider.vue'
import Display from './Display.vue'
import DisplayTwo from './DisplayTwo.vue'
import DisplayThree from './DisplayThree.vue'
import Displayer from './Displayer.vue'

const providerDisplay = computed(() => which.value === 0 || which.value === 1)

function rotate() {
  which.value = ( which.value + 1 ) % 3
}

</script>

Provider.vue #

<template>
  <slot />
</template>


<script setup>
import { provide, ref } from 'vue'

const variable = ref("hello, world!")

provide( 'variable', variable )
</script>

Display.vue #

<template>
  <div>
    Display {{ variable }}
  </div>
</template>


<script setup>
import { inject } from 'vue'

const variable = inject('variable')

</script>

DisplayTwo.vue #

<template>
  <div>
    Display Two {{ variable }}
  </div>
</template>


<script setup>
import { inject } from 'vue'

const variable = inject('variable')

</script>

DisplayThree.vue #

<template>
  <div>
    Display Three
  </div>
</template>


<script setup></script>

Displayer.vue #

<template>
  <div style="background-color: red;">
    <slot name="todisplay"/>
  </div>
</template>


<script setup>
</script>

若此方案不可行我已有替代方案，但仍想确认是否可行及实现方式。

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