Передача данных из VueJS Plugin в компонент VueJS

Question

Я создаю плагин для загрузочного бара для VueJS, и я хочу управлять данными компонента VueJS (часть плагина) с помощью плагина.

Таким образом, в конце концов, я хочу сделать следующее:

Включить плагин в main.js

import VueLoadingBar from 'path-to-plugin'; 

Vue.use(VueLoadingBar); 

Включить плагин компонент в App.vue

<template> 
    <div id="app"> 
    <vue-loading-bar><vue-loading-bar> 
    </div> 
</template> 

В различных компонентах Я хочу анимировать индикатор выполнения (например, Youtube) с this.$loadingBar.start().

---

Мой плагин состоит из плагина JavaScript файл ...

import LoadingBar from './LoadingBar.vue'; 

const vueLoadingBar = { 
    install() { 
    const loadingBarModule = { 
     start() { 
     // Start animating by setting the computed `progress` variable in the component, for simple 
     // demonstration with setInterval 
     setInterval(() => { 
      // How do I set `progress` that updates the component. Or is there an even better way to solve this? 
     }, 500); 
     } 
    } 

    Vue.component('vue-loading-bar', LoadingBar); 

    Vue.prototype.$loadingBar = loadingBarModule; 
    } 
} 

export default vueLoadingBar; 

... и .vue файл

<template> 
    <div class="c-loading-bar" :style="style"></div> 
</template> 

<script> 
    export default { 
    computed: { 
     style() { 
     return { 
      transform: `translateX(${this.progress}%)`, 
     } 
     }, 
     progress() { 
     return 0; 
     } 
     /* other computed data */ 
    } 
    } 
</script> 

<style> 
    .c-loading-bar { 
    position: fixed; 
    top: 0; 
    z-index: 20; 
    height: 5px; 
    background: red; 
    } 
</style> 

Что лучший способ компонент LoadingBar "контроль" из плагина (например, $ loadBar.start())?

Answer 1

Для тех, кто заинтересован: В конце концов, я дал компонент с данными name

export default { 
    data() { 
    return { 
     name: 'UNIQUE_NAME', 
    }; 
    } 
} 

и добавил следующий код в мой плагин install функцию

Vue.mixin({ 
    created() { 
    if (this.name === 'UNIQUE_NAME') { 
     console.log('You can now access the component with', this); 
    } 
    }, 
});