• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <teleport>

    to-string。需要 prop,必须是有效的查询选择器或 HTMLElement(如果在浏览器环境中使用)。指定将在其中移动<teleport>内容的目标元素。

    <!-- 正确 -->
    <teleport to="#some-id" />	// id 标志
    <teleport to=".some-class" />	// class 标志
    <teleport to="[data-teleport]" />
    
    <!-- 错误 -->
    <teleport to="h1" />
    <teleport to="some-string" />
    

    disabled-boolean。此可选属性可用于禁用<teleport>的功能,这意味着其插槽内容将不会移动到任何位置,而是在您在周围父组件中指定了<teleport>的位置渲染。

    <teleport to="#popup" :disabled="displayVideoInline">
    <video src="./my-movie.mp4">
    </teleport>
    

    请注意,这将移动实际的 DOM 节点,而不是被销毁和重新创建,并且它还将保持任何组件实例的活动状态。所有有状态的 HTML 元素(即播放的视频)都将保持其状态。

    上篇:<slot>

    下篇:<Suspense>