Javascript 将数据从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>

…和

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

导出默认值{
计算：{
风格（）{
返回{
转换：`translateX（${this.progress}%）`，
}
},
进展（）{
返回0；
}
/*其他计算数据*/
}
}
c-加载杆{
位置：固定；
排名：0；
z指数：20；
高度：5px；
背景：红色；
}

---

从插件中“控制”LoadingBar组件的最佳方法是什么（例如，$LoadingBar.start（））？

对于任何感兴趣的人来说：最后，我给了我的组件一个数据

名称

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

---

为什么不做一个简单的加载器组件并做一个进度道具来控制它呢？如果你真的想继续使用插件，你可以收到进度道具，并触发一些已完成的事件started@AfikDeri我将只在应用程序中包含一次组件，但我希望控制（启动加载动画）应用程序的各个部分（例如AJAX、路由，在某些其他情况下）。因为我不想每次加载某个东西时都包含一个新组件，所以我需要某种全局“函数”（因此我认为我需要

this.$loadingBar

）。在插件中，您将如何接收进度和触发事件的道具？

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