Vue：如何将组件追加到目标元素而非替换元素

你遇到的问题很典型——当你给$mount()传入选择器时，Vue会替换掉目标元素，而不是把组件追加进去。要实现追加效果，我们需要先在内存中挂载组件，再手动把组件的DOM元素添加到容器里。

修改后的代码实现 #

window.addEventListener('message', e => {
  // 先获取目标容器，避免容器不存在时出错
  const toastContainer = document.querySelector('.toast-container');
  if (!toastContainer) return;

  // 创建组件构造器和实例
  const ToastComponent = Vue.extend(Toast);
  const toastInstance = new ToastComponent({
    propsData: { message: 'hello' } // 传递你的props参数
  });

  // 先在内存中挂载组件（不传入目标元素）
  toastInstance.$mount();

  // 把组件的DOM元素追加到容器中
  toastContainer.appendChild(toastInstance.$el);
});

为什么这样能行？ #

• 当你调用$mount()不带参数时，Vue会把组件渲染到内存中的DOM节点里，但不会自动插入到页面中。
• 组件实例的$el属性就是渲染好的DOM元素，我们可以用原生DOM API（appendChild）把它追加到目标容器里，这样就不会替换掉原容器的内容了。

额外建议：管理组件实例（避免内存泄漏） #

如果你的页面会频繁创建Toast，记得在不需要的时候销毁组件实例，防止内存占用过高：

// 比如和你的Toast自动隐藏延迟对应，5秒后销毁组件
setTimeout(() => {
  toastInstance.$destroy();
  toastInstance.$el.remove();
}, 5000);

这样既能实现组件追加的需求，也能保证应用的性能稳定性。

内容的提问来源于stack exchange，提问作者Get Off My Lawn