將數據從VueJS插件傳遞到VueJS組件

我正在爲VueJS創建一個加載欄插件，我想用插件控制VueJS組件（插件的一部分）的數據。將數據從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>

插件組件在各種部件我想用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（））？

來源

2017-02-16 Daniel

爲什麼不能做一個簡單的加載器組件和做一個進度道具來控制它？如果你真的想堅持使用插件，你可以收到支持進度和發射一些已完成/開始的事件 – AfikDeri

@AfikDeri我將只在應用程序中包含組件，但我想控制（開始加載動畫）我的應用程序（例如AJAX，在其他一些情況下，路由）。由於我不想在每次加載內容時都包含一個新組件，因此我需要某種全局「功能」（因此爲什麼我認爲我需要'this。$ loadingBar'）。你將如何獲得插件中的進度和火災事件的道具？ – Daniel

任何有興趣：最後，我給我的分量數據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); 
    } 
    }, 
});

來源

2017-02-19 21:41:42 Daniel

將數據從VueJS插件傳遞到VueJS組件

回答

相關問題