У меня есть проблема, и я не могу понять, как ее решить.
Я буду использовать сетку AG для отображения некоторых данных, а некоторые компоненты будут загружаться за несколько секунд. Я переключаю компоненты динамически, с элементом component :is=“myComponent”. Я пытаюсь отобразить счетчик до того, как большой компонент рендерится, когда он выбран по ссылке. Я попытался с помощью v-cloak и отправки пользовательских событий из большого компонента (из созданного крюка L C, который я излучаю true, из подключенного крюка L C, который я излучаю false), чтобы установить условие v-if для счетчика на true и false. в родительском компоненте. Это не работает таким образом. Я создал пример и похожую проблему, которая у меня есть в большем приложении. У одного компонента есть элемент v-for для элемента li с 50000 итерациями, и пока этот компонент отрисовывается, я хочу показать спиннер в родительском компоненте. Есть ли какое-то решение этой проблемы? Или лучший способ сделать это? Thx!
Приложение. vue:
<template>
<div id="app">
<app-nav-bar
@my-small="selectedComponent = 'appSmall'"
@my-big="selectedComponent='appHelloWorld'"
></app-nav-bar>
<PulseLoader v-if="showIt"></PulseLoader>
<component :is="selectedComponent" @show-it="showIt = true" @hide-it="showIt=false"></component>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import NavBar from "./components/NavBar.vue";
import Small from "./components/Small.vue";
import PulseLoader from "vue-spinner/src/PulseLoader";
export default {
name: "app",
components: {
appHelloWorld: HelloWorld,
appNavBar: NavBar,
PulseLoader,
appSmall: Small
},
data() {
return {
showIt: false,
selectedComponent: "appSmall"
};
}
};
</script>
NavBar. vue:
<template>
<ul>
<li @click="sendData('my-small')">Small</li>
<li @click="sendData('my-big')">Big</li>
</ul>
</template>
<script>
export default {
methods: {
sendData(data) {
console.log(data, "Event");
this.$emit(data);
}
}
};
</script>
Большой компонент (HelloWorld. vue):
<template>
<div class="hello">
<ul>
<li v-for="n in 50000" :key="n">{{n}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
beforeCreate() {
this.$emit("show-it");
console.log("Show It");
},
mounted() {
this.$emit("hide-it");
console.log("Hide It");
}
};
</script>
Мелкий компонент (Маленький. vue):
<template>
<h1>Small Page</h1>
</template>
<script>
export default {};
</script>