求助：Vue初始化后动态注入组件无法渲染，求解决方案

在第三方应用中使用Vue渲染组件时，第三方应用会在Vue应用初始化并挂载完成后动态加载组件，最终仅能看到组件的HTML标签（例如检查元素时显示<my-component></my-component>），无法渲染组件对应的模板。

模拟场景：点击按钮通过原生JavaScript将Vue组件追加到DOM中，仅显示组件标签而非渲染后的内容。

示例代码如下：

HTML代码 #

<script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>
<div id="app">
  <sample-button></sample-button>
  <div id="new-button-wrap"></div>
</div>

<script id="sample-button" type="text/html">
    <button @click="addNew">Add Another Sample Button</button>
</script>

JavaScript代码 #

const app = Vue.createApp();

app.component('sample-button', {
    template: '#sample-button',
  setup() {
    const addNew = function() {
      var div = document.createElement('div');
      var sampleBtn = document.createElement('sample-button');
      div.textContent = 'here a button should appear, but instead a tag is appearing'
      div.appendChild(sampleBtn)
        document.querySelector('#new-button-wrap').appendChild(div)
    }
    return {
        addNew
    }
  }
})

app.mount('#app');

方法1：使用Vue的createVNode和render函数（推荐） #

Vue 3提供底层渲染API，可手动创建组件节点并挂载到指定DOM元素，是处理此类动态组件渲染的标准方式。

修改示例中的addNew函数：

const addNew = function() {
  // 创建组件虚拟节点
  const vnode = Vue.createVNode('sample-button');
  // 创建容器元素
  const container = document.createElement('div');
  container.textContent = 'here a button should appear, and now it does';
  // 将虚拟节点渲染到容器中
  Vue.render(vnode, container);
  // 把容器添加到目标节点
  document.querySelector('#new-button-wrap').appendChild(container);
}

原理：通过createVNode生成组件的虚拟DOM节点，再用render函数将其挂载到真实DOM容器，Vue会自动完成组件的初始化与渲染流程。

方法2：利用Vue响应式数据+动态组件 #

若场景允许，通过Vue响应式数组管理动态组件，让Vue自动处理渲染，避免直接操作原生DOM。

修改组件代码：

app.component('sample-button', {
  template: `
    <button @click="addNew">Add Another Sample Button</button>
    <div id="new-button-wrap">
      <div v-for="(item, index) in buttonList" :key="index">
        here a button should appear, and now it does
        <sample-button></sample-button>
      </div>
    </div>
  `,
  setup() {
    const buttonList = Vue.ref([]);
    const addNew = function() {
      buttonList.value.push({});
    }
    return {
      addNew,
      buttonList
    }
  }
})

原理：通过响应式数组buttonList的变化触发Vue更新机制，自动渲染新增组件，完全遵循Vue响应式流程。

方法3：手动挂载子组件实例 #

若需要更灵活的控制，可手动创建组件实例并挂载到指定DOM元素：

const addNew = function() {
  const container = document.createElement('div');
  container.textContent = 'here a button should appear, and now it does';
  const btnContainer = document.createElement('div');
  container.appendChild(btnContainer);
  // 创建组件实例并挂载
  const instance = Vue.createApp({
    components: { 'sample-button': app.component('sample-button') },
    template: '<sample-button></sample-button>'
  }).mount(btnContainer);
  document.querySelector('#new-button-wrap').appendChild(container);
}

注意：这种方式会创建新的Vue应用实例，若无独立上下文需求，优先使用方法1。

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