vue3.0 传送门teleport

我们先看一段代码，功能很简单，模板里有一个按钮，点击按钮，展示一个模态窗口。

const app = Vue.createApp({ data() { return {  show: false, }; }, methods: { handleShowModal() {  this.show = true; }, }, template: ` <div id="box">  <button @click="handleShowModal">显示模态窗口</button>  <div v-if="show">模态窗口</div> </div> `}

模态窗口样式如下：

.box { position: absolute; width: 100px; height: 100px; background-color: cadetblue;}.modal { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5);}

整个模态窗口呈绝对定位，left、right、top、bottom 全部给0，背景色为黑色半透明。我们期望的效果，应该点击按钮，模态窗口覆盖整个页面。

现在我们来运行下，我们会发现，其实模态窗口只覆盖了 #box 元素，因为 #box 本身就是绝对定位， 模态窗口元素是他的子节点，所以模态窗口只覆盖了 #box 元素。

如果在没有学习 teleport 之前，我们会在根节点定义一个模态窗口，在业务组件里去做调用。但是这样的话，组件与模态窗口的逻辑就会产生割裂感。那有没有什么方法，可以让我模态窗口就写在这个组件内，但真正呈现在页面时，可以动态插入到 元素上的，其实是有的，我们只要简单的修改下 template模板，就可以实现这个要求了。

template: ` <div >  <button @click="handleShowModal">显示模态窗口</button>  <teleport to="body">   <div >模态窗口</div>  </teleport>   </div>`

我们用 teleport 元素将 modal 包裹起来，并定义属性 to="body" ，运行页面，我们查看 dom 节点，就会发现 modal 元素已经追加到 body 底部了，效果如下。

--body --#root vue根节点 --.modal 模态窗口

传送到其他位置

如果我们想将 modal 节点传送到其他位置，也可以这么做。

<teleport to="#app"> <div >模态窗口</div></teleport> 

这段代码就是将 modal 元素追加到 id=app 的元素内，有一点需要注意，我一直说的是追加元素，假如说，原来 #app 内部已经存在其他节点，那么 modal 元素将追加到这些节点之后，有兴趣可以自己试一下。

与组件一起使用

其实使用在组件上和普通的 dom 元素并没有什么区别，组件中的节点将被渲染到指定的dom节点中（body或者指定ID）

const app = Vue.createApp({ ... template: ` <div id="box">  <button @click="handleShowModal">显示模态窗口</button>  <teleport to="body">   <child-component :name="name"/>  </teleport> </div> `}app.component('child-component',{ props:['name'] template: `<div class='modal'>{{name}}</div>`})

即使被渲染到不同的节点，它仍和普通子组件一样，接收父组件传输的数据，并没有因为渲染节点改变而改变。

对同一目标使用多个 teleport

<teleport to="#modals"> <div>A</div></teleport><teleport to="#modals"> <div>B</div></teleport>

结果如下：

-- #modal -- A -- B

所以上面我一直强调，使用 teleport 是将包裹元素追加到指定节点，所以上面两个 teleport 将依次追加到 #modal 上。

总结

teleport多应用于逻辑属于该组件，而从技术角度讲，却要把它移动到其他节点（body或者指定ID的元素） 里。最常见的场景就是创建一个包含全屏模式的组件，逻辑存在于组件内，但是基于css样式，却要把他移动到 body 元素上。

原文转载：http://www.shaoqun.com/a/504313.html

跨境电商：https://www.ikjzd.com/

韩国naver：https://www.ikjzd.com/w/1727

跨境通电子商务网站：https://www.ikjzd.com/w/1329

我们先看一段代码，功能很简单，模板里有一个按钮，点击按钮，展示一个模态窗口。constapp=Vue.createApp({data(){return{show:false,};},methods:{handleShowModal(){this.show=true;},},template:`<divid="box"><button@click="h
粉丝通：粉丝通
全球速卖通：全球速卖通
南京明孝陵神烈山碑被泼漆污迹开始清洗，预计16日完成：南京明孝陵神烈山碑被泼漆污迹开始清洗，预计16日完成
亚马逊转独立站专题03：facebook广告营销手段：亚马逊转独立站专题03：facebook广告营销手段
到厦门旅游，有什么美食推荐呢？：到厦门旅游，有什么美食推荐呢？