Vue3中＜Teleport/＞组件踩坑与异步组件运用_vue3 teleport 报错

重点：！这个组件要在你想要传送的DOM加载完成之后才能使用，不然是传送不了的。

官方释义： 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

作用场景：就比如说你想展示一个放大缩小的图片到整个页面上，但是又受到了例如：relative，absolute等定位的影响，运用这个组件或许是一个不错的方法，毕竟是官方提供的。

这里看到一个up主大概说了一下：

解决teleport无法获取DOM的问题：采用异步组件,这里分为两个版本：一个是插件的，说是提升效率，其实就是判断是否滑动到dom节点的位置，实现起来并不复杂，一个是未采用插件的普通形式，后续还有一个异步组件延迟加载的一个运用（上代码，其实你跑一遍就知道了）

index.vue
普通版本

<template>
  <div>
    <h1>父组件内容</h1>

    <div id="childrenOne">#childrenOne</div>
    <div id="childrenTwo">#childrenTow</div>
    <A </A>
    <B></B>
  </div>
</template>

<script setup>
import { useIntersectionObserver } from "@vueuse/core";
// import A from "./a.vue";
import B from "./b.vue";
import C from "./c.vue";
const A = defineAsyncComponent(() => import("./a.vue"));
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

A.vue

<template>
  <div>
    <h1>父组件内容</h1>

    <div id="childrenOne">#childrenOne</div>
    <div id="childrenTwo">#childrenTow</div>
    <A </A>
    <B></B>
  </div>
</template>

<script setup>
// import A from "./a.vue";
import B from "./b.vue";
import C from "./c.vue";
const A = defineAsyncComponent(() => import("./a.vue"));
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

b.vue

<template>
  <div>这是b组件</div>
</template>

<script>
export default {};
</script>

<style scoped>
div {
  width: 100vw;
  height: 100vh;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

异步组件：插件版本

index.vue
记得瞄一眼这里：记得看target这个属性，它拿到的是一个dom元素，我推测这个是检测是不是已经到这个组组件的位置了，如果到了就显示，没到就不显示。

<template>
  <div>
    <h1>父组件内容</h1>

    <div id="childrenOne">#childrenOne</div>
    <div id="childrenTwo">#childrenTow</div>

    <B></B>
    <div ref="target">
      <A v-if="targetIsVisible"></A>
    </div>
  </div>
</template>

<script setup>
import { useIntersectionObserver } from "@vueuse/core";
// import A from "./a.vue";
import B from "./b.vue";
const A = defineAsyncComponent(() => import("./a.vue"));
// target是一个dom
const target = ref(null);
const targetIsVisible = ref(false);
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  console.log(isIntersecting);

  if (isIntersecting) targetIsVisible.value = isIntersecting;
});
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

a.vue

<template>
  <div>
    <h1>子组件内容</h1>
    <Teleport :to="teleportValue"><div>传送组件内容</div> </Teleport>
    <button @click="teleportChange">修改传送组件</button>
  </div>
</template>

<script setup>
import { useIntersectionObserver } from "@vueuse/core";
let teleportValue = ref("#childrenTwo");
let teleportChange = () => {
  teleportValue.value = "#childrenOne";
  console.log(teleportValue.value);
};
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

单纯的使用异步组件

ps:为什么使用异步组件，使用异步组件可以实现分包加载，减小单个包的体积。用到的时候再进行加载,你看我这个可能理解不了，你把我的代码跑一边，然后打包一下，你就可以很直观的看到了
index.vue

    <Suspense>
      <template #default> <B></B></template>
      <template #fallback>加载中1</template>
    </Suspense>
//一定要是用suspense，官方提供的
1
2
3
4
5

b.vue

<template>
  <div>这是b组件{{ list }}</div>
</template>

<script setup>
import axios from "axios";
let list = ref([]);
let res = await axios.get("www.baidu.com");
// list.value = res.data.data;
list.value = res;
</script>

<style scoped>
div {
  width: 100vw;
  height: 100vh;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

defineAsyncComponent使用（我这里主要是想延迟加载一下）

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import("./Foo.vue"),

  // 加载异步组件时使用的组件
  loadingComponent: Loading,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: Error,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 30000,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15