（七）Teleport-瞬间移动传送门和事件emit

teleport

这也是一个新的特性 将对应的组件直接可以挂载到根页面元素上
举例子：
这是一个全局的提示框 在使用的时候需要，需要在别页面中进行引用，
可以添加teleport
to属性可以添加跟组件的样式选择器

<template>
	<teleport to="#teleport">
		<div style="width:100px;height:100px;background:red;">
		</div>
	</teleport>
</template>
<script>
 ecport default{
	name:userChild,
	
 }
</script>

使用emit事件

组件使用时候本就是很多事件 props的是交互

vue3新添加了emits新特性

<script lang="ts">
	export default defineComponent({
		props:{
			isShow:false,
		},
		emits:{
			'close-model':null  默认写null不写验证
			
			支持函数验证,
			'close-mode-data':(paypload:any)=>{
					return payload.type === 'hello'
			}
		}
		setup(props,context){
			使用上边的emit
			context.emit('close-mode-data',{
				type:'hello'
			})
			同时在组件使用的时候需要函数验证
			const buttonClick = () =>{
				context.emit('close-mode-data',{
					type:'hello'
				})
			}
			return {
				buttonClick,
			}
		}
	})
</script>

注意：在是使用这个组件的时候，其实和vue2一样，:传值 @事件传值，只不过在这个组件加载的时候，teleport将组件直接传递到了跟组件上面，直接展示