Почему динамический компонент не работает в vue3?

Вот рабочий пример 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>

Переделать под Vue3 вариант не работает. Ошибок не возникает, но компонент не появляется.

<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>

Кто-нибудь изучал бета-версию vue2? Помоги мне, пожалуйста. Извините за корявый язык, я использую переводчик Google.


vue.js vuejs3
person progervova    schedule 29.04.2020    source источник
comment
попробуйте вот так. async () => await import('./DynamicComponent')   -  person Ifaruki    schedule 29.04.2020
comment
Я пробовал. К сожалению, ничего не изменилось.   -  person progervova    schedule 29.04.2020
comment
привет @progervova, есть новости по этому поводу? Я в такой же ситуации   -  person Iván Rodríguez Torres    schedule 12.11.2020

Ответы (2)


arrow_upward
1
arrow_downward

Оставьте все в шаблоне как в Vue2

<template>
    <div>
        <h1>O_o</h1>
        <component :is="name"/>
        <button @click="onClick">Click me !</button>
    </div>
</template>

Изменять только в настройке с помощью defineAsyncComponent

Вы можете узнать больше об defineAsyncComponent здесь, https://labs.thisdot.co/blog/async-components-in-vue-3

const isShow = ref(false);
const name = computed (() => isShow.value ? defineAsyncComponent(() => import("./DynamicComponent.vue")) : '')

const onClick = () => {
    isShow.value = true;
}
person Oleksii Zelenko    schedule 29.01.2021
comment
Да, это решает проблему для Vue 3 и монтирует асинхронные компоненты. Это следует принять как ответ. - person mladzo; 09.06.2021

arrow_upward
0
arrow_downward

По "часам" все работает.

<template>
  <component :is="componentPath"/>
</template>

<script lang="ts">
import {defineComponent, ref, watch, SetupContext} from "vue";

export default defineComponent({
  props: {
    path: {type: String, required: true}
  },
  setup(props: { path: string }, context: SetupContext) {
    const componentPath = ref("");

    watch(
        () => props.path,
        newPath => {
          if (newPath !== "")
            import("@/" + newPath + ".vue").then(val => {
              componentPath.value = val.default;
              context.emit("loaded", true);
            });
          else {
            componentPath.value = "";
            context.emit("loaded", false);
          }
        }
    );

    return {componentPath};
  }
});
</script>
person progervova    schedule 16.11.2020