我正在为 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())?
最佳答案
对于任何感兴趣的人:最后,我给了我的组件一个数据名称
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);
}
},
});
关于javascript - 将数据从 VueJS 插件传递到 VueJS 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42286287/