Vue3传送组件Teleport 【vue|Vue3传送组件Teleport】Teleport 组件vue3新出的组件主要用于把组件传送到另一个组件的下面 ，避免样式被父组件的样式污染,上代码。
1.子组件TelePort
jsPang....
.center {
height: 200px;
width: 200px;
border: 1px solid #000;
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}2.父组件代码
3.index.html里面的代码
- 锐客网
说明：使用前 dom节点在#app节点下面，使用后dom在#center 节点下面。
使用前 app的样式会污染子组件TelePort的样式。
文章图片
使用Teleport组件后 子组件TelePort在#center节点下面,子组件样式没有被污染
文章图片
推荐阅读
- vue|vue3组件封装之搜索组件的封装
- vue|vue中使用hover.css动画
- vue|nextTick
- webpack|-4048webpack安装 没有文件文件夹或者目录的权限解决办法
- js|JS深浅拷贝
- vue|如何使用vue ui快速创建自己的项目
- javascript|[MobX State Tree数据组件化开发][2]（实例-TodoList）
- 前端|JS中的数组(含leetcode例题)＜持续更新~＞
- 前端|JavaScript数组常用方法及其特性