组件内的 Vue 3 组件

Question

基本上..我有下面的代码，我希望两个组件（a-comp 和 b-comp）都显示在“主”组件（my-component）上。

我的CodePen尝试：https://codepen.io/azmvth/pen/vYqdojq

const app = Vue.createApp({
    components: {
        'my-component': {
            template: `
            <div>
                <a-comp />
                ↑ A COMPONENT MUST SHOW UP ABOVE<br>
                ↓ B COMPONENT MUST SHOW UP BELOW
                <b-comp />
            </div>`
        },

        'a-comp': {
            template: `
            <div>
                AAAAAAAAAAAAAA
            </div>`
        },

        'b-comp': {
            template: `
            <div>
                BBBBBBBBBBBBBB
            </div>`
        }
    }
}).mount('body')

Answer 1

首先，主组件必须在其自己的组件中同时包含组件 A 和 B 组件属性 也许这会对你有所帮助。 => https://codepen.io/Dimitar-Georgiev-the-flexboxer/pen/RwzMrgO

const app = Vue.createApp({
    components: {
        'my-component': {
            template: `
            <div>
                <a-comp />
                ↑ A COMPONENT MUST SHOW UP ABOVE<br>
                ↓ B COMPONENT MUST SHOW UP BELOW
                <b-comp />
            </div>`,
            components: {
                'a-comp': {
                    template: `
                    <div>
                        AAAAAAAAAAAAAA
                    </div>`
                },
                'b-comp': {
                    template: `
                    <div>
                        BBBBBBBBBBBBBB
                    </div>`
                }
            }
        },
        
    }
}).mount('body')

致以诚挚的问候