为什么动态组件在 vue3 中不起作用？

Question

这是一个有效的 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 beta版吗？请帮帮我。抱歉语言笨拙，我使用 Google 翻译器。

Answer 1

使用 'watch' 一切正常。

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

Answer 2

像 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;
}

Answer 3

试试这个

import DynamicComponent from './DynamicComponent.vue'


export default {
    setup() {
        const state = reactive({
            name: computed(() => isShow ? DynamicComponent : '')
        });

        ...

        return {
            state,
            ...
        }
    }
}

Answer 4

这个问题似乎与我们在使用 setup 脚本时注册组件的方式有关 - 有关详细信息，请参阅 the official docs。我发现您需要全局注册该组件，以便在模板中通过字符串引用它。

例如，对于下面的 Vue 组件：

<template>
  <component :is="item.type" :item="item"></component>
</template>

<script setup lang="ts">
  // Where item.type contains the string 'MyComponent'
  const props = defineProps<{
    item: object
  }>()
</script>

我们需要在main.ts中注册组件，例如：

import { createApp } from 'vue'
import App from './App.vue'

import MyComponent from './MyComponent.vue'

var app = createApp(App);
app.component('MyComponent', MyComponent)
app.mount('#app')

为什么动态组件在 vue3 中不起作用？

Why dynamic component is not working in vue3?

vue.js

vuejs3