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

Posted 2023-03-16

【中文标题】Vuejs：如何在异步导入加载中设置道具值？

【英文标题】：Vuejs: How to set props value in async import loading?

【发布时间】：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>

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

【参考方案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>