반응형
약속을 사용하여 Vue 앱을 렌더링하고 사용자 입력을 기다립니다.
디자인 질문이 있는데, 저는 현재 로직 헤비 JS 스크립트를 가지고 있는데, 여러 가지 약속으로 작성해서 아래와 같은 구조를 만들었습니다.
init()
.then(result => doSomethingA(result))
.then(result => doSomethingB(result))
.then(result => loadVueApp(result))
자, 이제.loadVueApp()함수 호출은 다음 작업을 수행합니다.
new Vue({
el : '#app',
render : h => h(App)
});
그러면 Vue 앱이 렌더링되고 사용자는 앱과 상호 작용하여 다양한 화면으로 이동하고 글로벌하게 저장할 항목을 선택할 수 있습니다.EventBus컴포넌트를 입력합니다.
이제 궁금한 것은 사용자의 선택을 약속의 탑으로 되돌리려면 어떻게 해야 하는가 하는 것입니다.제가 그걸 해야 하나요?
나는 그 문제를 해결할 수 있었다loadVueApp단순히 앱이 표시되는 것만으로 바로 기능하고 나중에 로직 헤비 스크립트로 기능 호출을 합니다만, 이것은 그다지 깨끗하지 않습니다.
좋은 생각 있어요?
잘 부탁드립니다.
다음은 간단한 예를 제시하겠습니다.
- Vue 컴포넌트는 템플릿에서 인스턴스화되어
<body>기존 DOM 요소가 아닌 요소(UI를 처음에 표시하지 않으려는 경우)입니다. - 약속은 제출 버튼을 클릭했을 때 입력된 텍스트로만 해결됩니다.컴포넌트 인스턴스가 파기되어 DOM에서 삭제됩니다.
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>단일 파일 구성 요소를 사용하는 경우 코드 구조는 다음과 같습니다.
입력 UI.표시하다
<template>
<div>
<input v-model="value">
<button @click="$emit('submit', value)">Submit</button>
</div>
</template>
<script>
export default {
data() {
return {
value: '',
};
},
};
</script>
main.discloss.main.discloss.
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));
언급URL : https://stackoverflow.com/questions/50306236/render-a-vue-app-using-a-promise-and-await-user-input
반응형
'programing' 카테고리의 다른 글
| Vue.js 3에서 TypeScript를 사용한 소품 입력 (0) | 2022.07.03 |
|---|---|
| 루프의 어느 시점에서 정수 오버플로가 정의되지 않은 동작이 됩니까? (0) | 2022.07.03 |
| 다중 응용 프로그램의 공유 저장소 Nuxt (0) | 2022.07.03 |
| ^ 연산자는 Java에서 무엇을 합니까? (0) | 2022.07.03 |
| Vue 인스턴스에서 글로벌 믹스인 메서드를 사용하는 방법 (0) | 2022.07.03 |