Vuejs：如何在异步导入加载中设置道具值？答案

【问题标题】：Vuejs: How to set props value in async import loading?Vuejs：如何在异步导入加载中设置道具值？
【发布时间】：2020-01-10 12:27:20
【问题描述】：

我正在尝试为我导入的异步组件设置加载组件。这可行，但我会在安装它之前更改该组件的“颜色”道具。我怎样才能做到这一点？

<script>
import loaderEllipsis from '@/components/common/loaderEllipsis.vue'
import SettingsNavigation from '@/components/views/Settings/SettingsNavigation.vue'

export default {
        name: 'view_settings',
        components: {

            loaderEllipsis,
            SettingsNavigation,
            SettingsOverview: function(){
                return {
                loading: loaderEllipsis, //<-- I want to change the color props here before mount it.
                component: new Promise(function(resolve, reject) {
                    setTimeout(function() {
                        resolve(import(/* webpackChunkName: "settings-overview" */ '@/components/views/Settings/SettingsOverview.vue') );
                    }, 15000);
                }),

                }
            }
        }
}
</script>

无论如何，我尝试更改为道具颜色，但不起作用。感谢您的帮助！

【问题讨论】：

标签： javascript asynchronous vuejs3

【解决方案1】：

我创建了解决方案。

<script>
import loaderEllipsis from '@/components/common/loaderEllipsis.vue'
import SettingsNavigation from '@/components/views/Settings/SettingsNavigation.vue'

export default {
        name: 'view_settings',
        components: {

            loaderEllipsis,
            SettingsNavigation,
            SettingsOverview: function(){
                return {
               loading: {
                    render: function(createElement) {
                        return createElement(loaderEllipsis, {
                            props: {
                                color: 'red'
                            }  
                        })
                    }

                },
                component: new Promise(function(resolve, reject) {
                    setTimeout(function() {
                        resolve(import(/* webpackChunkName: "settings-overview" */ '@/components/views/Settings/SettingsOverview.vue') );
                    }, 15000);
                }),

                }
            }
        }
}
</script>

【讨论】：