VueJSプラグインからVueJSコンポーネントにデータを渡す

Question

私はVueJS用のローディングバープラグインを作成しています。プラグインを使用してVueJSコンポーネント（プラグインの一部）のデータを制御したいと思います。私は次のことをやってみたい最後にそう

、：

はApp.vue

さまざまなコンポーネントで

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

でのプラグインコンポーネントを含めるmain.js

import VueLoadingBar from 'path-to-plugin'; 

Vue.use(VueLoadingBar); 

でプラグインを含めます私はthis.$loadingBar.start()と進行状況バー（例えば、Youtubeのような）をアニメーション化したい。

私のプラグインの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コンポーネントを "制御" するための最良の方法は何プラグインの中から（これは$ loadingBar.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); 
    } 
    }, 
});