如何在不同的组件中复用一个 SFC Vue 组件实例？

Question

Motivation :

I have a single file component, say Player, which displays video or show some images. Since it costs huge amount of memory, and it is used in many pages (components under root), I want to instantiate it only once and reuse it in every page depending on it. Also, Player is resized for some pages, so I need it to be dynamically adjustable, which means it should support props. Furthermore, since there are many pages using Player, I hope I can use Provide / Inject feature of Vue to spreading Player everywhere.

Current :

// 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

Expect :

To sum up, Player has these features in my imagination:

1. Initiated in root component.
2. The root component Provide Player to every component under it.
3. Pages under root can pass props to the Injected Player somehow to resize it.

This is just my imagination, any other available solution is welcome.

What I've tried :

• I tried to initiate Player in memory , but I don't know how to render it.
• I tried to initiate Player as a dynamic component , but I don't know where to place the slot and how to initiate Player.
• I tried to understand render function to re-render it, but I don't know how to leverage it in my case.
• This post seems to be the closest solution, but I am still confused how to implement the concept with limited description in it.

Answer 1

There are two ways to do this-

1. Globally import the component in the main.js file and use on any page freely. ie-

    import Vue from "vue";  
    import Player from "@/components/Player.vue";  
    Vue.component("AppButton", AppButton); 

2. Create a mixin named playerMixin.js inside the mixins directory.
   Import the Player component inside that mixin and import that mixin in all pages.
   The mixin code should look like this-

playerMixin.js

import Player from "@/components/Player.vue";

export const playerMixin = {
  data() {
    // any data properties related to player functionalities 
  },

  components: {
    Player,
  },

  methods: {
    // any methods related to player functionalities
  }
}

Now, you can use this mixin on any page, like this-

AnyPage.vue

import { playerMixin} from "@/mixins/playerMixin.js";

export default {
  name: "AnyPage",
  mixins: [playerMixin],
}

The main benefit of using mixin is that not only components will be imported once but the common functionality of Player which is the same for every page like passing props, and methods like play, a pause can be written once and can be used by any page.

To understand more about mixin, read this .