vue3.0 的Teleport

Teleport：
什么是Teleport?——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。

如图所示：

文件目录：

Child.vue代码：

<template><div class="child"><h3>我是Child组件</h3><Son/></div>
</template><script>
import Son from './Son.vue'
export default {name:'Child',components:{Son},
}
</script><style>
.child{background-color: gray;padding: 10px;
}
</style>

Dialog.vue代码：

<template><div><button @click="isShow = true">点我弹个窗</button><teleport to="body"><div v-if="isShow" class="mask"><div class="dialog"><h3>我是一个弹窗</h3><h4>内容</h4><h4>内容</h4><h4>内容</h4><button @click="isShow = false">关闭弹窗</button></div></div></teleport></div>
</template><script>
import {ref} from 'vue'
export default{name:'Dialog',setup(){let isShow = ref(false)return {isShow}}
}
</script><style>
.mask{position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.5);
}
.dialog{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);text-align: center;width: 300px;height: 300px;background-color: rosybrown;
}
</style>

Son.vue代码：

<template><div class="son"><h3>我是Son组件</h3><Dialog/></div>
</template><script>
import Dialog from './Dialog.vue'
export default {name:'Son',components:{Dialog}
}
</script><style>
.son{background-color: orange;padding: 10px;
}
</style>

App.vue代码：

<template><h3>我是App组件</h3><Child/>
</template><script>
import Child from './components/Child.vue'
export default{name:'App',components:{Child},
}
</script><style>
.app{background-color: rgb(221, 69, 216);padding: 10px;
}</style>

效果：

vue3.0 的Teleport相关推荐

pb调用键盘钩子的例子_搞不动Vue3.0的源码，先做个API调用师也行（新人踩坑初试）...
作为一个刚刚入行工作不久的前端菜鸟,Vue2.x都没整熟练.但看着身边人都在学习Vue3,我也不敢怠慢,毕竟Vue3正式版已经发布两个月了,我还是耐着性子好好的阅读了一下Vue3.0的文档.没有其他大 ...
Vue3.0的有优点有哪些？它比vue2快在哪？
1.Vue3.0六大亮点 Performance:性能比Vue 2.x快1.2~2倍 Tree shaking support:按需编译,体积比Vue2.x更小 Composition API: 组合 ...
Vue3.0笔记（B站天禹老师）
Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多.2600+次提交.30+个RFC.600+次PR.99位贡献者 g ...
【Vue系列】Vue3.0知识点汇总整理
目录一.Vue3简介 1.Vue3带来了什么? 二.创建Vue3工程 1.使用vue-cli创建 2.使用vite创建补充:分析Vue3的工程结构三.常用Composition API 1.初识 ...
Vue3.0系列(一): VUE3.0的新特性
和Vue2.0 相比,Vue3.0有哪些亮点: 序号特性解析 1 Performance 性能上比Vue2.0快1.3-2倍 2 Tree shaking support 按需编译,体积更加轻量化 ...
Vue3 —— 创建 Vue3.0 工程
系列文章目录内容参考链接 Vue3 创建 Vue3.0 工程 Vue3 - Composition API(零) setup函数.ref函数.reactive函数.响应式.reactive对比re ...
Vue3.0尚硅谷（讲师：张天禹）视频学习笔记
一.创建Vue3.0工程 1.使用vue-cli创建官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create ...
15分钟上手vue3.0(小结)
这篇文章主要介绍了15分钟上手vue3.0,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值 Vue 3 还没有正式发布,但是 Alpha 版本已经发布了. 虽然官方还不推荐 ...
论vue3.0和vue2.0区别之编程方式及例子详解
系列文章目录第一章论vue3.0和vue2.0区别之编程方式及例子详解第二章同一台电脑实现 vue-cli2和vue-cli3同时并存及常见命令第三章 vue3.0项目实战 - Ele ...

vue3.0 的Teleport

vue3.0 的Teleport相关推荐

最新文章

热门文章