木灵鱼儿
阅读:395
vue3 Teleport 传送门
官方文档:Teleport
该组件可以将插槽接收的内容渲染到指定的dom位置,常见的一个业务需求就是model弹窗了,我们有时候会在子组件里面去书写一个弹窗,但是这个弹窗是全局性的,为了防止被定位元素影响,我们vue2时会在mounted生命钩子里手动将model的dom传入body里面,而且还得在销毁时从body移除。
vue3提供了teleport
组件,它和react的传送门组件其实效果相同,它有两个props属性:
to
to支持字符串和html元素,如果是字符串,指的是css选择器,而html元素则是dom。
disabled
接收一个布尔值,表示是否禁用传送门,通过这个属性我们可以很方便的实现一个video视频的小屏处理,当用户往下滚动时,可以将video传送到右下角小屏展示。
interface TeleportProps {
/**
* 必填项。指定目标容器。
* 可以是选择器或实际元素。
*/
to: string | HTMLElement
/**
* 当值为 `true` 时,内容将保留在其原始位置
* 而不是移动到目标容器中。
* 可以动态更改。
*/
disabled?: boolean
}
<button @click="open = true">Open Modal</button>
<Teleport to="body" :disabled="disabled">
<div v-if="open" class="modal">
<p>Hello from the modal!</p>
<button @click="open = false">Close</button>
</div>
</Teleport>
官方表示该组件只是改变了渲染dom结构,所以它不会影响组件之间的逻辑关系,也就说,除了我们在代码编写层逻辑关系不变,它的虚拟dom位置也不会发生改变。
所以Teleport
里的组件通过$parent
获取到的,其实并不是Teleport本身,Teleport可以视为一个假组件,所以我们依旧可以拿到“逻辑”上的父级组件。
如果存在多个Teleport
的to属性指向同一个html元素,那么会根据渲染的先后顺序插入(顺次追加)。
高阶使用
动态绑定to
事实上to这个属性是可以动态绑定的,当我们的to属性发生改变时,teleport会先将内容移动到新的位置。
<Teleport :to="container">
</Teleport>
ref获取内容
ref是可以正常获取到Teleport内的内容的
<template>
<div>
<button @click="onClick">s</button>
<Teleport to="body">
<h2 v-if="flag" ref="title">标题</h2>
</Teleport>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick } from "vue";
export default defineComponent({
setup() {
const flag = ref(false);
const title = ref();
function onClick() {
flag.value = !flag.value;
nextTick(() => {
console.log(title);
});
}
return {
flag,
title,
onClick,
};
},
});
</script>
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
vue-router4 新增功能
动态路由这个其实在3版也有,不过3版原来使用的api是addRoutes,这个api顾名思义,就是可以传入一个路由数组来进行注册,后来被废弃,现在3版和4版统一采用addRouteapi。addRoute一次只能添加一个路由,但是有两种用法:添加一条新路由router.addRoute({ path: "/about", name: "About", component: () => import("../views/About.vue"), })给已存在的路由注册一个子路由,父路由必须有name属性route...
vue-router4 一些常见配置的改动
创建路由实例方式改变3版本的时候是通过new的方式创建路由实例,4版本是改用了createRouter的方式:import { createRouter } from 'vue-router' const router = createRouter({ // ... })路由模式配置改变3版本路由模式是由mode属性控制,值为字符串,现在通过import引入不同函数来创建不同的路由模式:"history"改为createWebHistory()"hash"改为createWebHashHistory()"abstract"...
vue3 filter过滤器
vue3直接移除了filter过滤器,官方推荐,如果要使用过滤器可以使用computed计算属性和method函数来代替。如果使用了全局过滤器,官方也提供了一个属性来进行迁移修复,但是也只推荐用于迁移。const app = createApp(App) //给当前app的全局属性上挂载一个过滤器对象 app.config.globalProperties.$filters = { currencyUSD(value) { return '$' + value } }使用的时候:<template> <h1>Bank Account Bala...
vue3 keyCode修饰符
vue2我们在监听按键事件的时候,是可以通过在事件后面加上按键码来实现监听某一个按键的。<input @keyup.13="submit" />甚至我们还可以使用按钮别名alias的方式调用<input @keyup.enter="submit" />还可以全局自定义别名,通过Vue.config.keyCodes属性。Vue.config.keyCodes = { f1: 112 }随着ECMAScript的标准推荐,官方已经不推荐使用keyCode键码了,这个功能在js的官方定义上是一个已弃用的状态,最新的标准是使用...
vue3 取消$on、$off、$once
在vue2的时候,我们可以通过$on、$off、$once、$emit来实现一个事件总线EventBus,但是vue3的时候,又换了一套逻辑思想。官方不鼓励使用EventBus在组件之间进行通信,虽然短期内确实是非常简单的解决方案,但是从长远来看,它总是很难维护的,所以官方更加推荐使用其他方式:父子组件之间可以通过Props和自定义事件来进行沟通,如果是兄弟组件,可以通过父级组件来沟通使用Provide / inject方式来跨层级沟通,比如与插槽的内容组件。Provide / inject也可以用于跨层级沟通,以避免props,emit事件层级过深的问题通过使用插槽的形式来避免层级沟通...
vue3 transition、watch、挂载api的变化
transition动画的变化就是vue3调整了一下动画类名,原来vue2是:.v-enter{ opacity: 0; } .v-leave{ opacity: 1; }这两个在vue3中改为:.v-enter-from{ opacity: 0; } .v-leave-to{ opacity: 1; }其相关属性也对应发生了变化:leave-class被重命名为 leave-from-class(可以写成 leaveFromClass在渲染函数或 JSX 中)enter-class被重命名为 enter-from-class(可以写成 enterFromClass在...
vue3 自定义指令
vue3将自定义指令的生命钩子函数全部改为与组件的生命钩子函数相同,原来vue2时,自定义指令的生命钩子是一套完全不同的,但是也正因为如此,它的钩子函数有点晦涩难懂,这次统一了我觉得是一件非常好的事情,让我们的记忆力压力减轻了很多,也方便了我们的理解。vue3写法:const myDirective = { // 在绑定元素的 attribute 前 // 或事件监听器应用前调用 created(el, binding, vnode, prevVnode) { // 下面会介绍各个参数的细节 }, // 在元素被插入到 DOM 前调用 beforeMoun...
vue3 异步组件
书接上文,我们的函数式组件在vue3里只能声明一个函数再通过h函数组合处理,然后导出使用,你会发现这个组件是一个函数类型。然后我再去看一下vue2时,我们的异步组件引入方式:const asyncModal = () => import('./Modal.vue')你会发现除了异步组件也是一个函数类型,这就尴尬了,怎么区分呢?vue3提供了一个defineAsyncComponent函数用于区分异步组件。import { defineAsyncComponent } from 'vue' const asyncModal = defineAsyncComponent(() =>...