vue3.0新特性teleport是啥,用起来真香(开阔视野!)
前言 在 vue2.0 时代,我们经常会有这样的需求,写代码逻辑的时候希望将组件写在某个模板之下,因为这样我们很好的使用组件内部的状态数据,控制组件的展示形态。但是从技术的角度上我们又希望将这段代码移到 DOM 中 Vue app 之外的其他位置。 举个简单的例子,我们在使用 modal 组件的时候,我们将它放在了我们的模板 template 里面,但是由于 modal 组件希望位于页面的最上方,这时候我们将 modal 组件挂载在 body 上面是最好控制的,我们能够很好的通过 zIndex 来控制 modal 的位置,当他嵌套在 templat 里面的时候就不那么容易了。 vue2.0中的实现 vue2.0 中我在写这个组件的时候是通过手动的形式来进行挂载的,我写了一个vue指令来进行这个操作,帮助我将 modal 组件挂载到 body 上面去,专这样也能够很好的通过控制 zIndex 来控制 modal 的展示。 function insert ( el ) { const parent = el.parentNode; if (parent && parent !== document .body) { parent.removeChild(el); document .body.appendChild(el); } } export default ( typeof