Vue：将组件附加到元素

Question

我有一个看起来像这样的 vue 组件：

<template>
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="true" data-delay="5000">
    <!-- HTML Clipped -->
    <div class="toast-body">{{message}}</div>
  </div>
</template>

<script>
export default {
  props: ['title', 'message']
}
</script>

然后我有一个 eventListener 来监听通过postMessage 发送的消息。这确实有效，但我不认为 mount 是做我想做的事情的正确方法。

window.addEventListener('message', e => {
  let toastComp = Vue.extend(Toast)
  let toast = new toastComp({
    propsData: {
      message: 'hello'
    }
  }).$mount('.toast-container')
})

我正在寻找的是 vue 将组件附加到 .toast-container 元素而不是替换元素。如何做到这一点？

Answer 1

如何在.toast-container 中创建和附加一个元素，然后将您的组件安装到该新元素上：

window.addEventListener('message', e => {
  const toastContainer = document.querySelector('.toast-container')
  const mountNode = document.createElement('div')
  mountNode.id = 'mount-node'
  toastContainer.appendChild(mountNode)

  let toastComp = Vue.extend(Toast)
  let toast = new toastComp({
    propsData: {
      message: 'hello'
    }
  }).$mount('#mount-node')
})