我有一个设计问题，目前有一个逻辑沉重的JS脚本，我已将其编写为各种Promise，并创建了以下结构:
init()
.then(result => doSomethingA(result))
.then(result => doSomethingB(result))
.then(result => loadVueApp(result))
现在，
loadVueApp()函数调用执行以下操作:new Vue({
el : '#app',
render : h => h(App)
});
呈现我的Vue应用程序，然后用户可以与该应用程序进行交互，转到各种屏幕，进行选择，然后将它们存储在全局
EventBus类型的组件中。现在我的问题是，我该如何将用户的选择传递回我的 promise 塔？我应该这样做吗？
我可以仅根据出现的应用程序立即解决
loadVueApp，然后稍后再调用函数调用逻辑繁重的脚本-但这感觉并不干净。有任何想法吗？
提前致谢。
最佳答案
这是一个执行以下操作的简单示例:
<body>元素，而不是现有的DOM元素(以防您不希望UI最初可见)。 const InputUI = {
template: '#input-ui',
data() {
return {
value: '',
};
},
};
function getInput() {
return new Promise(resolve => {
const inputUI = new Vue(InputUI);
inputUI.$once('submit', value => {
inputUI.$destroy();
inputUI.$el.remove();
resolve(value);
});
inputUI.$mount();
document.body.appendChild(inputUI.$el);
});
}
getInput().then(value => alert(value));<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<template id="input-ui">
<div>
<input v-model="value">
<button @click="$emit('submit', value)">Submit</button>
</div>
</template>如果您使用的是单个文件组件，则将代码结构如下:
InputUI.vue
<template>
<div>
<input v-model="value">
<button @click="$emit('submit', value)">Submit</button>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
};
},
};
</script>
main.js
import Vue from 'vue';
import InputUI from './InputUI.vue';
function getInput() {
return new Promise(resolve => {
const InputUIVue = Vue.extend(InputUI);
const inputUI = new InputUIVue();
inputUI.$once('submit', value => {
inputUI.$destroy();
inputUI.$el.remove();
resolve(value);
});
inputUI.$mount();
document.body.appendChild(inputUI.$el);
});
}
getInput().then(value => alert(value));