vue $mount 挂载异步组件，没有正确渲染是怎么回事？

Question

js 代码：

// 将异步组件改成是 import test from 'test.vue' 
// 也就是普通组件，结果正常！
// 求教
const test = () => import('test.vue');

export default {
    data () {
        dom: {} ,
    } , 
    mounted () {
        this.dom.container = this.$refs.container;
        
        this.mount();
    } , 
    methods: {
        mount () {
            let childVue = Vue.extend(test);
            new childVue().$mount(this.dom.container);
        } , 
    } , 
};

test.vue

<template>
    <div>hello world!</div>
</template>
<script><>
export default {
    name: 'v-test' , 
    
};
</script>
<style scoped></style>

然而，页面上却没有渲染出 hello world!，没报错，也啥都没渲染出来！这是怎么回事？

难道异步组件一定要配合 vue-router 或 <component :is='c'></component> 才能够正常使用吗？

Answer 1

js中的第一句const test = () => import('test.vue');换成import test from './test.vue'试试？

---

我理解的import函数返回的是一个promise。所以这里你定义的test执行后返回的应该是一个promise。那应该就可以按Promise的写法去写后面的代码:

test().then((comp) => {
    let childVue = Vue.extend(comp);
    new childVue().$mount(this.dom.container);
})

---

亲自试了一下。需要这样写。

test().then((compModule) => {
    console.log(compModule)
    let childVue = Vue.extend(compModule.default);
    new childVue().$mount(this.dom.container);
})

打印出来了compModule。如下：

实际上我们需要的是它的default。