vue.js - Vue 3 Teleport 是否只能移植到 vue 之外？

Question

Vue 3 有一个新的 Teleport 功能，它取代了 vue 2 中的 portal-vue 插件。但是，我发现无法将组件移植到 vue 控制的地方(=在 vue 应用程序中)。它仅在移植到外部(主体、其他元素......)时有效。

const app = {
  template: `
  <div>
    <h1>App</h1>
    <div id="dest"></div>
    <comp />
  </div>`
}


Vue.createApp(app).component('comp', {
  template: `
  <div>
    A component
    <Teleport to="#dest">
      Hello From Portal
    </Teleport>
  </div>`
}).mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.9/dist/vue.global.js"></script>

<div id="app"></div>

如您所见，控制台甚至报告说需要已经渲染传送目标。但是我怎么能告诉 vue 先渲染哪个组件呢？在我的例子中，目标在传送前的 dom 中。
这在 portal-vue 中不是问题，而且非常令人失望，因为它使整个概念变得不那么可用。

Answer 1

Vue 错误消息指向了问题所在。它说 Invalid Teleport target on mount: null问题是目标不存在尚 .
这可以通过仅在安装组件后渲染传送部分来轻松解决。
看起来这是 Vue 应该在没有显式检查的情况下处理的事情。当您将 id 作为字符串传递时，很难判断目标是否是 Vue 组件，尤其是在尚未呈现的情况下。但我只是在推测球队的意图。

const app = {
  template: `
  <div>
    <h1>App</h1>
    <div id="dest"></div>
    <comp />
  </div>`
}

Vue.createApp(app).component('comp', {
  template: `
  <div>
    A component
    <Teleport to="#dest" v-if="isMounted">
      Hello From Portal
    </Teleport>
  </div>`,
  data: function(){
    return { 
        isMounted: false
    }
  },
  mounted(){
    this.isMounted = true
  }
}).mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.9/dist/vue.global.js"></script>

<div id="app"></div>