Vue3在AEM嵌套组件中子实例初始化失效问题求助

你的问题出在Vue3的挂载机制上：当父组件执行app.mount()时，会完全替换挂载目标元素（.component-a）的内部DOM结构。而子组件的初始化脚本（IIFE）嵌套在父组件的挂载目标里，会在父组件挂载前执行——此时子组件的DOM确实存在，但父组件挂载后，Vue会把这部分原始DOM替换成自己编译后的内容，导致子组件的实例挂载到了已经被移除的DOM节点上，自然无法正常工作。

1. 给父组件添加插槽，保留内部子组件DOM #

这是最可靠的方案，通过让父组件的Vue模板包含<slot>，告诉Vue要保留挂载目标内的原始内容作为插槽，而非替换掉。

修改componentA.js：

function initComponentA(componentID){
    const { createApp } = Vue3
    const app = createApp({
        // 用插槽保留父元素内的所有子组件内容
        template: `<div><slot></slot></div>`
    })
    
    app.mount(`#${componentID}`)
}

说明：Vue组件要求必须有单个根元素，所以用<div>包裹<slot>。如果不需要额外层级，也可以直接把.component-a的样式移到这个根<div>上，或者让根元素继承原有样式。

2. 避免重复加载Vue3 #

当前每个组件都通过sly加载myproject.vue3，会导致Vue3被多次注入页面，可能引发版本冲突或性能问题。建议改为在页面全局加载一次Vue3，所有组件脚本只加载自身的初始化代码。

修改组件HTML（以component-a.html为例）：

<div class="component-a" id="${component.cellName}">
</div>
<!-- 移除重复的Vue3加载，只保留组件自身的JS -->
<sly data-sly-call="${clientlib.js @ categories='myproject.componentA'}"></sly>
<script>
(function () {
        const componentID = "${component.cellName}";
        initComponentA(componentID);
    })();
</script>

子组件的HTML做同样修改，去掉myproject.vue3的加载。

3. 延迟父组件初始化（备选，不推荐） #

如果无法修改父组件的Vue模板，可以通过监听子组件的初始化状态，延迟父组件的挂载。但这种方式依赖事件顺序，可靠性较低，仅作备选：

首先修改子组件的初始化脚本，添加挂载完成标记：

function initChildComponent(componentID){
    const { createApp } = Vue3
    const app = createApp({
        mounted() {
            // 挂载完成后给元素添加标记类
            document.getElementById(componentID).classList.add('vue-mounted')
        }
    })
    app.mount(`#${componentID}`)
}

然后修改父组件的初始化逻辑，等待所有子组件完成挂载：

function initComponentA(componentID){
    const parentEl = document.getElementById(componentID)
    const checkChildrenReady = () => {
        const childEls = parentEl.querySelectorAll('.child-component')
        const mountedChildren = parentEl.querySelectorAll('.child-component.vue-mounted')
        // 所有子组件都挂载完成后再初始化父组件
        if (childEls.length === mountedChildren.length) {
            const { createApp } = Vue3
            const app = createApp({})
            app.mount(`#${componentID}`)
        } else {
            setTimeout(checkChildrenReady, 100)
        }
    }
    checkChildrenReady()
}

• 确保${component.cellName}生成的ID全局唯一，避免多个组件挂载到同一个ID导致冲突
• 全局加载Vue3时，要确保它在所有组件脚本之前加载，避免Vue3未定义的错误

内容的提问来源于stack exchange，提问作者new