Vue中代码传送怎么实现
这篇文章主要介绍“Vue中代码传送怎么实现”，在日常操作中，相信很多人在Vue中代码传送怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue中代码传送怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
代码传送是啥
在Vue中，代码传送就是将某部分的代码从Vue的template标签下传送到指定的地方，这个地方通常是body标签下。在使用Vue编写界面时，我们都是在html的Body中写一个div，然后指定一个id，然后在Vue的实例中的template中写我们的界面代码，然后由Vue来帮我们将templte中的dom元素渲染到界面上。如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template:
`
<div>
...界面描述
</div>
`
});
const vm = app.mount('#root');
</script>
从上面的代码可知，我们在Vue实例的template标签中渲染的dom元素都会挂载到body中的id为root的div下面，如下图：
这样本来已经能够完成大部分界面描述需求了，但是有种场景需要我们去解决，那就是比如我们删除一个内容时，为了防止是用户的误触，会弹出一个对话框，然后对话框背后会有一个铺满整个窗口的蒙层。假设我们的展示内容的div很小，这时蒙层就只能展示到我们当前的div中，如下图：
点击显示蒙层的按钮后：
我们发现，这个蒙层无法覆盖所有窗口的区域，这很明显是不符合需求，因为我们所有的界面代码都会被挂载到body标签中的id="root"的div中，如果这个div下的界面的大小被固定了，那么蒙层的大小就会被限制，蒙层的做法我们最好放到body标签中，这样蒙层就不会收到父DIV的大小限制了。那我们的代码都是在template中编写的，如何将其传送到body标签下呢，这就是本文的内容teleport.
实例解析
为了展示Vue传送的例子，我们在界面的中心写了一个绿色的块，代表我们的UI，有一个按钮，点击后显示蒙层。如下图所示：
这个需求就可以使用代码传送的技术实现，代码如下：
<!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">
<title>传送门</title>
<style>
.area{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 300px;
background: green;
}
.mask{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.5;
color: #ffff;
font-size: 100px;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<div id="hello"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return{
show:false,
message:'hello world'
}
},
methods:{
handleClick(){
this.show = !this.show;
}
},
template:
`
<div class="area">
<button @click="handleClick">点击显示蒙层</button>
<teleport to="#hello">
<div class="mask" v-show="show">
{{message}}
<div>海塔灯</div>
</div>
</teleport>
</div>
`
});
const vm = app.mount('#root');
</script>
运行结果：
我们可以看到，在template下定义的蒙层代码就被传送到body标签下了，传送代码的实现也很简单，就是使用
<teleport to="#hello">要传送的内容</teleport>
在teleport标签上，可以是用to="标签或者是id",假设要传送到body下，就使用to="body",要传送到指定的id对应的div下就使用 to="#id名称"的形式。
到此，关于“Vue中代码传送怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注蜗牛博客网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论