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>

我随后添加了一个事件监听器，监听通过postMessage发送的消息。这确实可以正常工作，但我认为mount不是我想要做的正确方式。

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

我需要的是Vue将组件附加到.toast-container元素，而不是替换该元素。如何实现？

- Get Off My Lawn

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')
})

- Steve Holgado

---

不要将 #mount-node 传递给 $mount()，我认为将 mountNode 元素传递更好。 - Get Off My Lawn

很高兴这能帮到你 :) - Steve Holgado

Toast在哪里声明/设置，以便您可以在事件监听器中访问它？ - Mike T