javascript - 将数据从 VueJS 插件传递到 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>

在各种组件中，我想使用 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 组件的最佳方法是什么(例如 this.$loadingBar.start())？

Answer 1

对于任何感兴趣的人:最后，我给了我的组件一个数据名称

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);
    }
  },
});