vue3 Teleport瞬间移动函数使用方法详解

vue3 Teleport瞬间移动函数的使用，供大家参考，具体内容如下

Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件"

他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的

以一个例子来看:编写一个弹窗组件

<template>
<teleport to="#modal">
 <div id="center" v-if="isOpen">
 <h2><slot>this is a modal</slot></h2>
 <button @click="buttonClick">Close</button>
 </div>
</teleport>
</template>
<script lang="ts">

export default {
 props: {
 isOpen: Boolean,
 },
 emits: {
 'close-modal': null
 },
 setup(props, context) {
 const buttonClick = () => {
 context.emit('close-modal')
 }
 return {
 buttonClick
 }
 }
}
</script>
<style>
 #center {
 width: 200px;
 height: 200px;
 border: 2px solid black;
 background: white;
 position: fixed;
 left: 50%;
 top: 50%;
 margin-left: -100px;
 margin-top: -100px;
 }
</style>

在app.vue中使用的时候跟普通组件调用是一样的

<template>
<div id="app">
 <img alt="Vue logo" src="./assets/logo.png">
 <HelloWorld msg="Welcome to Your Vue.js App"/>
 <HooksDemo></HooksDemo>
 <button @click="openModal">Open Modal</button><br/>
<modal :isOpen="modalIsOpen" @close-modal="onModalClose"> My Modal !!!!</modal>
</div>

</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import HooksDemo from './components/HooksDemo.vue'
import Modal from './components/Modal.vue'
import{ref} from 'vue'
export default {
 name: 'App',
 components: {
 HelloWorld,
 HooksDemo,
 Modal
 },
 setup() {
 const modalIsOpen = ref(false)
 const openModal = () => {
 modalIsOpen.value = true
 }
 const onModalClose = () => {
 modalIsOpen.value = false
 }
 return {
 modalIsOpen,
 openModal,
 onModalClose
 }
 }
}
</script>

<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

要是在app.vue文件中使用的时候,modal是在app的 DOM节点之下的,父节点的dom结构和css都会给modal产生影响
于是产生的问题

1.modal被包裹在其它组件之中，容易被干扰
2.样式也在其它组件中，容易变得非常混乱

Teleport 可以把modal组件渲染到任意你想渲染的外部Dom上,不必嵌套在#app中,这样就可以互不干扰了,可以把Teleport看成一个传送门,把你的组件传送到任何地方
使用的时候 to属性可以确定想要挂载的DOM节点下面

<template>
 <teleport to="#modal">
 <div id="center">
 <h2>柏特better</h2>
 </div>
 </teleport>
</template>

在public文件夹下的index.html中增加一个节点

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico" >
 <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
 <noscript>
 <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <div id="modal"></div>
 <!-- built files will be auto injected -->
 </body>
</html>

这样可以看到modal组件就是没有挂载在app下,不再受app组件的影响了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue3 Teleport 的实践及原理

    详解Vue3 Teleport 的实践及原理

    Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新,Vue3 还新增了一个内置组件: Teleport.这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置. 使用场景 业务开发的过程中,我们经常会封装一些常用的组件,例如 Modal 组件.相信大家在使用 Modal 组件的过程中,经常会遇到一个问题,那就是 Modal 的定位问题. 话不多说,我们先写一个简单的 Modal 组件. <!-- Modal.vue --> <

  • vue3 Teleport瞬间移动函数使用方法详解

    vue3 Teleport瞬间移动函数使用方法详解

    vue3 Teleport瞬间移动函数的使用,供大家参考,具体内容如下 Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件" 他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的 以一个例子来看:编写一个弹窗组件 <template> <teleport to="#modal"> <div id="center" v-if="isOpen">

  • Vue3中使用Supabase Auth方法详解

    目录 引言 安装Supabase 设置Supabase 创建一个AuthUser组合 创建页面 注册.vue EmailConfirmation.vue 登录.vu ForgotPassword.vue Me.vue login() loginWithSocialProvider() logout() isLoggedIn() register() update() sendPasswordResetEmail() 观察Auth状态的变化 测试东西 注销 家庭作业 总结 引言 Supabase是

  • C++中可以接受任意多个参数的函数定义方法(详解)

    能够接受任意多个参数的函数,可以利用重载来实现.这种函数的执行过程类似于递归调用,所以必须要有递归终止条件. #include <iostream> #include <bitset> void print() {} // 递归终止条件.这是必需的. template<typename Type, typename... Types> void print(const Type& arg, const Types&... args) { std::cou

  • C语言memset函数使用方法详解

    C语言memset函数使用方法详解 一.函数原形   void *  memset(void*s, int ch,size_t n) 二.函数作用  将以s内存地址为首的连续n个字节的内容置成ch,一般用来对大量结构体和数组进行清零 三.常见错误 1.搞反了 ch 和 n的位置 对char[20]清零,一定是 memset(a,0,20); 2.过度使用memset 3.其实这个错误严格来讲不能算用错memset,但是它经常在使用memset的场合出现 int fun(strucy someth

  • 在一个页面重复使用一个js函数的方法详解

    1.给每个拥有相同行为的问题DOM节点一个相同的class类,如question,同时给不同的问题一个不同的标识ID如 id="question1" id="question2"...诸如此. 2.给类.question绑定点击事件,在触发函数里面先判断当前点击的这个类的id,即可知道你要操作的是哪一个问题,然后调用你的那个伸缩函数即可. <!DOCTYPE html> <html> <head lang="en"&

  • 对Python实现累加函数的方法详解

    这个需求比较奇怪,要求实现Sum和MagaSum函数,实现以下功能 Sum(1) =>1 Sum(1,2,3) =>6 MegaSum(1)() =>1 MegaSum(1)(2)(3)() =>6 实际上Sum就是Python自建的sum函数,它支持变参,变参怎么实现,自然是*args,所以很容易写出雏形: Sum def Sum(*args): count = 0 for i in args: count+=i return count 第二个函数就有点皮了,它要求有参数的时候

  • 如何在 clion 运行多个 main 函数（方法详解）

    在写 C++ 的题目的时候经常会遇到这样的问题,写了多个 cpp 文件,在 clion 中编译报错不能同时存在多 main 函数 这里写了一个小程序优雅地解决这个问,非常简单,就是就是读字符串写文件 直接修改一下 CMake 自动遍历文件即可 多个 main 函数的报错 在 clion 中写完一题,想写下一题,结果发现 main 函数不能运行 正确的解决方法 在牛客用户AAnonymous的告知下,借鉴了他的 github 上的CMakeLists.txt,直接修改 CMakeLists.txt

  • C++中使用function和bind绑定类成员函数的方法详解

    定义一个普通的类 class Test1{ public: void fun(int val){ cout<<"hello world "<<val<<endl; } }; 开始第一个测试 int main(){ Test1 t; function<void(int)> pf = std::bind(&Test1::fun,t,2); pf(4); // return 0; } 输出的值是2,说明pf传进去的4并没有什么用,在bi

  • C语言system函数使用方法详解

    C语言system函数使用方法详解

    目录 函数接口 作用 返回值 测试代码 参数 MODE命令 color命令 函数接口 _DCRTIMP int __cdecl system( _In_opt_z_ char const* _Command ); system函数已经被收录在标准c库中,头文件为<stdlib.h> 作用 执行系统命令调用命令处理器来执行命令. 如果命令是空指针,则该函数只检查是否有命令处理器可以被此函数使用. 命令非空则调用命令的效果取决于系统和库的实现,并可能导致程序以非标准的方式运行或终止. 补充: 执行

  • C语言qsort函数使用方法详解

    目录 1.qsort函数 1.1qsort函数功能 1.2参数介绍 2.qsort函数功能测试 3.冒泡排序思想模拟实现qsort 1.qsort函数 void qsort (void* base, size_t num, size_t size, int (compar)(const void,const void*)); 1.1qsort函数功能 可以排序任何数据类型 对 所指向的数组元素进行排,使用函数确定顺序. 此函数使用的排序算法通过调用指定函数并指向元素的指针作为参数来比较元素. 该

随机推荐