I'm currently working on creating a component with nested components in Vue. The structure can be simplified as
ParentComponent.vue
|
|__ ChildComponent.vue
My goal is to load the ChildComponent only when a button is clicked using @click in the ParentComponent. I want the component to fetch its files dynamically after the click event, rather than just toggling visibility. This approach will help optimize network usage especially considering potential deep nesting.
UPDATE: I attempted the following code snippet
<template>
<div class="home">
<button type="button" @click="isActive=!isActive">SHOW</button>
<async-component v-show="isActive"></async-component>
</div>
</template>
<script>
const AsyncComponent = () => ({
// The component to load (should be a Promise)
component: import('./components/ChildComponent.vue'),
// A component to use while the async component is loading
loading: LoadingComponent,
// A component to use if the load fails
error: ErrorComponent,
// Delay before showing the loading component. Default: 200ms.
delay: 200,
// The error component will be displayed if a timeout is
// provided and exceeded. Default: Infinity.
timeout: 3000
})
export default {
name: "home",
components: {
AsyncComponent
},
data(){
return{
isActive:false
}
}
};
</script>
However, upon clicking the button, the component appears without any network requests being made based on the developer tools network tab. It seems that the component is pre-loaded instead of dynamically fetching it, as intended.