如何在Vue不同组件中复用单文件组件(SFC)实例？

需求背景 #

我有一个名为Player的单文件组件(SFC)，用于展示视频或图片。由于它占用大量内存，且在多个页面（根组件下的组件）中使用，我希望只实例化一次并在所有依赖它的页面中复用。同时，Player在某些页面需要调整尺寸，因此它需要支持动态传参（props）。此外，由于有很多页面使用Player，我希望能利用Vue的Provide / Inject特性来实现全局可用。

当前实现 #

Player组件 #

<template>
    <div>
        ... // 展示图片和视频的内容
    </div>
</template>

<script>
export default Vue.extend({
    props: {
        width: {
            type: Number,
            default: 284,
        },
        height: {
            type: Number,
            default: 214,
        },
    },
    data() {
        ... // 图片和视频相关数据
    },
    methods: {
        ... // 图片和视频相关逻辑方法
    },
})
</script>

页面使用示例 #

<template>
    <div>
        <player
            :width="592"
            :height="333"
        />
        ... // 其他页面逻辑内容
    </div>
</template>

... // 其他代码内容

期望效果 #

总结来说，我期望Player具备以下特性：

1. 在根组件中初始化。
2. 根组件通过Provide将Player提供给所有子组件。
3. 根组件下的页面可以通过某种方式向注入的Player传递props以调整其尺寸。

以上只是我的设想，任何可行的解决方案都欢迎。

已尝试方案 #

• 尝试过在内存中初始化Player，但不知道如何渲染它。
• 尝试过将Player作为动态组件初始化，但不知道如何放置插槽以及如何初始化Player。
• 尝试理解渲染函数以重新渲染它，但不知道如何在我的场景中运用。
• 有一篇帖子的解决方案似乎最接近我的需求，但由于描述有限，我仍不清楚如何实现该概念。

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