vue3.0 teleport传送标签

1、作用:
	能将teleport标签内的元素,添加到页面任意元素已有内容后

2、使用:
	<teleport
		to='css选择器'
		disabled 禁止移动,就在本位置显示
	>
		... 其中的组件除了位置变化,不影响和父组件直接的逻辑通信
	</teleport>

3、多个teleport使用,后面的在前面追加
	<teleport to="#modals">
	  <div>A</div>
	</teleport>
	<teleport to="#modals">
	  <div>B</div>
	</teleport>
	
	<!-- result-->
	<div id="modals">
	  <div>A</div>
	  <div>B</div>
	</div>

4、使用场景
	如定义一个弹框,弹框是相当于父级定位,需要让弹框相当于body定位时
	app.component('modal-button', {
	  template: `
	    <button @click="modalOpen = true">
	        Open full screen modal! (With teleport!)
	    </button>
	
	    <teleport to="body">
	      <div v-if="modalOpen" class="modal">
	        <div>
	          <button @click="modalOpen = false">
	            Close
	          </button>
	        </div>
	      </div>
	    </teleport>
	  `,
	  data() {
	    return { 
	      modalOpen: false
	    }
	  }
	})

效果图:

代码示例:

<template>
  <!-- 不用写根标签 -->
  <div>hh</div>
  <div class="ff">ww</div>
  
  <teleport to='body'>
    <div>插槽内容</div>
  </teleport>
  
</template>

  <!-- lang='ts'声明可以使用ts语法 -->
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({  //定义一个组件
  name: 'HelloWorld',
  props: { //传递参数,可以添加类型约束
    msg: String,
  },

});
</script>