10、传送门Teleport - 图1飞雷神

Teleport传送门,可以将组件渲染到另一个DOM节点,在另个DOM节点做一个标记，之后将组件渲染过去。

类似于四代木金色闪光的飞雷神。

10、传送门Teleport - 图2

一、index.html

定义teleport渲染的DOM节点

  1. <body>
  2.     <noscript>
  3.       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  4.     </noscript>
  5.     <div id="app"></div>
  6.     <div id="loading"></div> ++
  7. </body>

二、定义teleport

  1. <template>
  2.   <teleport to="#loading">
  3.     <div id="center">
  4.       <h2>Loading</h2>
  5.     </div>
  6.   </teleport>
  7. </template>
  8. <script>
  9. export default {};
  10. </script>
  12. <style>
  13. #center {
  14.   display: grid;
  15.   justify-items: center;
  16.   align-items: center;
  17.   background-color: #eee;
  18. }
  19. </style>

三、About.vue中使用teleport

  1. <template>
  2.   <div class="about">
  3.     <h1>This is an about page</h1>
  4.     <loadig></loadig>
  5.   </div>
  6. </template>
  7. <script>
  8. import Loadig from './components/Loading.vue'
  9. export default {
  10.    components:{
  11.      Loadig
  12.    }
  13. }
  14. </script>