VueJS V3 - 渲染动态组件

如何解决VueJS V3 - 渲染动态组件

试图了解如何将组件动态渲染到我的父页面中。我假设我将有一个对象数组，其中每个对象都有一个组件名称和绑定到对象参数的数据字段。这表明如果一个组件在页面上重复两次或更多次，则字段绑定对于组件实例必须是唯一的。

下面我收到一条错误消息：

"[Vue 警告]: 组件缺少模板或渲染函数。at at "

经过数小时的阅读和反复试验，我不得不暂时放弃并寻求帮助。这是我的代码：

default.html

    !DOCTYPE html>
        <html lang="en">
        
        <head>
            <Meta charset="UTF-8" />
            <title>Agenda to Minutes</title>
            <!-- Import Styles -->
            <!-- <link rel="stylesheet" href="./assets/styles.css" /> -->
            <!-- Import Vue.js -->
            <script src="https://unpkg.com/vue@next"></script>
        </head>
        
        <body>
            <div id="app">
        
                htmlData: {{htmlData}} <br>
                this.htmlData: {{this.htmlData}} <br>
                    
                <dynamic-one></dynamic-one>
        
            </div>
        
            <!-- Import App -->
            <script src="./main.js"></script>
        
            <!-- Import Components -->
            <script src="./components/dynamicOne.js"></script>
        
            <!-- Mount App -->
            <script>
                app.component('my-dynamic-component',{/* defination */})
                const mountedApp = app.mount('#app')
        
                _this = mountedApp;
                _this.htmlData = '<div>Hello - {{someVar}}</div>'
        
            </script>
        </body>
        </html>

我的组件页面

        app.component('dynamic-one',{
            props: {
                templateHtml: {
                    templateHtml: true,type: String
                }
            },data() {
                return {
                    someVar: 'Test',htmlData:'xyz'
                }
            },template:
                /*html*/
                <div>
                    <!-- _this.htmlData: {{_this.htmlData}} -->
        
                dynamicOne : {{this.htmlData}}
        
                    <my-dynamic-component :template-html="htmlData" />
                </div>,created() {
                this.$options.template = this.templateHtml
            }
        })

main.js

    
        const app = Vue.createApp({
            data() {
                return {
                    htmlData: 'myName'
                }
            }
        })
```

VueJS V3 - 渲染动态组件

如何解决VueJS V3 - 渲染动态组件

相关推荐