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组件的最佳方法是什么（例如这个。$ 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);
    }
  },
});

将数据从VueJS插件传递到VueJS组件

1 个答案: