Простой работающий пример динамического компонента Vue2
<template>
<div>
<h1>O_o</h1>
<component :is="name"/>
<button @click="onClick">Click me !</button>
</div>
</template>
<script>
export default {
data: () => ({
isShow: false
}),
computed: {
name() {
return this.isShow ? () => import('./DynamicComponent') : '';
}
},
methods: {
onClick() {
this.isShow = true;
}
},
}
</script>
Все работает, все замечательно. Начал пробовать как это будет функционировать с Composition API.
<template>
<div>
<h1>O_o</h1>
<component :is="state.name"/>
<button @click="onClick">Click me !</button>
</div>
</template>
<script>
import {ref, reactive, computed} from 'vue'
export default {
setup() {
const state = reactive({
name: computed(() => isShow ? import('./DynamicComponent.vue') : '')
});
const isShow = ref(false);
const onClick = () => {
isShow.value = true;
}
return {
state,
onClick
}
}
}
</script>
Запускаем, на экране компонент не появляется, хотя ошибок никаких не отображается. Никто с бета версией еще не возился?