Vue3传送组件Teleport

最新推荐文章于 2024-09-13 10:58:10 发布

置顶呵呵的牛

最新推荐文章于 2024-09-13 10:58:10 发布

阅读量491

点赞数

分类专栏： vue js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43723051/article/details/122446760

版权

js 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

vue

25 篇文章 1 订阅

订阅专栏

Vue3传送组件Teleport

Teleport 组件vue3新出的组件主要用于把组件传送到另一个组件的下面，避免样式被父组件的样式污染,上代码。

1.子组件TelePort

<template>
  <div class="center">jsPang....</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  setup() {},
});
</script>
<style scoped>
.center {
  height: 200px;
  width: 200px;
  border: 1px solid #000;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
}
</style>

2.父组件代码

<template>
  <div class="hello">
    <Teleport to="#center">
      <TelePort></TelePort>
    </Teleport>
  </div>
</template>

3.index.html里面的代码

	<!DOCTYPE html>
<html lang="">

<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">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
      Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <div id="center"></div>
  <!-- built files will be auto injected -->
</body>

</html>

说明：使用前 dom节点在#app节点下面，使用后dom在#center 节点下面。