p2p网站功能模块,2022双11各大电商平台销售数据,制作自己的网页,wordpress打印代码前言
近期Vue3更新了一些新的内容#xff0c;我都还没有一个一个仔细去看#xff0c;但是还是有必要去解读一下新内容的。就先从Teleport 开始吧。
官方对 Teleport 的解释是#xff1a;Teleport 是一个内置组件#xff0c;它可以将一个组件内部的一部分模板“传…前言
近期Vue3更新了一些新的内容我都还没有一个一个仔细去看但是还是有必要去解读一下新内容的。就先从Teleport 开始吧。
官方对 Teleport 的解释是Teleport 是一个内置组件它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
这么说的话像我这种火影迷那不就相当于火影忍者里面的通灵之术吗可以在任意位置召唤一个组件。 在一些特定的环境这个组件确实会让业务逻辑变得非常好实现他的使用场景有
弹窗浮动元素等等
怎么说都是一个很酷的组件嘞。
案例
下面就展示一个小案例
templatedivbutton clickchangeTarget改变目标位置/buttonteleport :totargetdiv classmodalp这是一个动态目标的模态框/p/div/teleport/div
/templatescript
export default {data() {return {target: body};},methods: {changeTarget() {this.target #someOtherElement; // 改变目标位置}}
};
/script
除了这种用法在 Vue3.5 中可以使用 defer prop 推迟 Teleport 的目标解析直到应用的其他部分挂载。但是需要注意的是目标元素必须与 Teleport 在同一个挂载/更新周期内渲染即如果 div 在一秒后才挂载Teleport 仍然会报错。延迟 Teleport 的原理与 mounted 生命周期钩子类似。
