时间戳

首页 > 解决方案 > 如何将 Vue 3 组件挂载到父组件？

javascript - 如何将 Vue 3 组件挂载到父组件？

问题描述

我一直在尝试通过父组件挂载钩子在运行时以编程方式挂载组件。但是，我只能在父应用程序中创建新的应用程序实例而不是子应用程序。

function createTranslationDivs (lastInLineWordInPars) {
  lastInLineWordInPars.forEach((lastInLineWordInPar) => {
    const translationDiv = defineComponent({
      name: 'Translation-Div' + lastInLineWordInPar.row,

      extends: TranslationDiv,

      setup: function (props) {
        const row = ref(lastInLineWordInPar.row)

        return {
          row
        }
      }
    })

    const containerElement = lastInLineWordInPar.$parent.$el.childNodes[0]

    const div = document.createElement('div')

    containerElement.insertBefore(div, lastInLineWordInPar.$el.nextSibling)

    const createdDiv = createApp(translationDiv).mount(div)

    translationDivs.push(createdDiv)
  })
}

基本上我想在段落中结束一行的每个跨度之后创建一个 div。我怎样才能实现它，以便创建的 Divs 的级别与 span 相同，而不是 createdDivs 成为最顶层的应用程序实例？谢谢。

标签： javascriptvue-componentvuejs3

解决方案

推荐阅读