Reasons for Seeking a Solution:
I have created a single file component, called Player, which is responsible for displaying videos and images. Due to its high memory consumption, I want to instantiate it only once and use it across multiple pages (components under the root). Additionally, the Player component needs to be dynamically resizable using props, as it will be displayed differently on various pages. Moreover, since many pages utilize the Player component, I am exploring the possibility of utilizing Vue's Provide / Inject feature to make Player accessible everywhere.
Current Implementation:
// Player
<template>
<div>
... // display images and video
</div>
</template>
<script>
export default Vue.extend({
props: {
width: {
type: Number,
default: 284,
},
height: {
type: Number,
default: 214,
},
},
data() {
... // images and video
},
methods: {
... // logic related to images and video
},
})
// An example of `pages`
<template>
<div>
<player
:width="592"
:height="333"
/>
... // some other logic
</div>
</template>
... // everything else
Desired Outcome:
To summarize, my vision for the Player component entails these key features:
- Initialization in the root component.
- The root component should
Providethe Player component to all nested components. - Pages within the root hierarchy should be able to pass props to the injected Player component in order to resize it as needed.
This represents my ideal scenario, but I am open to exploring alternative solutions as well.
Methods Attempted So Far:
- I attempted to initialize the Player in memory, but I encountered challenges with rendering it.
- I tried to treat the Player as a dynamic component, yet I struggled with determining where to slot it and how to initialize the Player.
- I explored the concept of render functions for potential re-rendering strategies, but I found it difficult to apply in my specific case.
- This post appeared promising, although I still lack clarity on implementing the proposed solution due to limited information provided.