vue3 新添加了一个默认的组件就叫 Teleport，我们可以拿过来直接使用，它上面有一个 to 的属性，它接受一个css query selector 作为参数，这就是代表要把这个组件渲染到哪个 dom 元素中
<!-- ModalDemo.vue -->
<template>
<teleport to="#modal">
<div id="center" v-if="isOpen">
<h2>this is a modal</h2>
<button @click="buttonClick"> Close</button>
</div>
</teleport>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
props:{
isOpen:Boolean,
},
emits:{
// 'close-modal':(payload:any)=>{
// return payload.type=='close'
// }
'close-modal':null
},
setup(props,context){
const buttonClick=()=>{
context.emit('close-modal')
}
return {buttonClick}
// context.emit('close-modal',{
// type:'hello'
// })
}
})
</script>
<style scoped>
#center{
width: 200px;
height: 200px;
border: 2px solid black;
background: white;
position: fixed;
left: 50%;
top: 50%;
margin-left: -100px;
}
</style>
<!-- index.html -->
<!-- App.vue -->
<template>
<img alt="Vue logo" src="./assets/logo.png">
<modaldemo :isopen="modalIsOpen" @close-modal="onModalClose">My Modal !!!</modaldemo>
<button @click="openModal">openModal</button>
</template>
<script lang="ts">
import { ref } from 'vue';
import ModalDemo from './components/ModalDemo.vue';
export default {
components: { ModalDemo },
name: 'App',
setup(){
const modalIsOpen=ref(false)
const openModal=()=>{
modalIsOpen.value=true
}
const onModalClose=()=>{
modalIsOpen.value=false
}
return {
modalIsOpen,openModal,onModalClose
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
参考文档
在正确渲染组件之前进行一些异步请求是很常见的事。组件通常会在本地处理这种逻辑，绝大多数情况下这是非常完美的做法。
<suspense> </suspense>组件提供了另一个方案，允许将等待过程提升到组件树中处理，而不是在单个组件中。
- 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。
- 重要的是，异步组件不需要作为 的直接子节点。它可以出现在组件树任意深度的位置，且不需要出现在和 自身相同的模板中。只有所有的后代组件都准备就绪，该内容才会被认为解析完毕。
- 另一个触发 fallback 的方式是让后代组件从 setup 函数中返回一个 Promise。通常这是通过 async 实现的，而不是显式地返回一个 Promise
<!-- App.vue -->
<template>
<img alt="Vue logo" src="./assets/logo.png">
<suspense>
<template #default>
<async-show>
</async-show></template>
<template #fallback>
<h1>Loading !!!...</h1>
</template>
</suspense>
<suspense>
<template #default>
<dog-show>
</dog-show></template>
<template #fallback>
<h1>Loading DogShow!!!...</h1>
</template>
</suspense>
</template>
<script lang="ts">
import AsyncShow from './components/AsyncShow.vue';
import DogShow from './components/DogShow.vue';
export default {
components: { AsyncShow,DogShow },
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<!-- AsyncShow.vue -->
<template>
<h1>{{result}}</h1>
</template>
<script>
import {defineComponent} from 'vue'
export default defineComponent({
setup(){
return new Promise((resolve)=>{
setTimeout(()=>{
return resolve({result:'this is AsyncShow.vue'})
},3000)
})
}
})
</script>
<!-- DogShow.vue -->
<template>
<img :src="result&&result.message">
</template>
<script>
import axios from 'axios'
import {defineComponent} from 'vue'
export default defineComponent({
async setup(){
const rawData=await axios.get('https://dog.ceo/api/breeds/image/random')
return {result:rawData.data}
}
})
</script>
- 一旦 的 default 插槽里的内容被解析，则它只有在 default 根结点被替换的时候才能被再次触发。而树里的深层嵌套组件不足以让 回到等待状态。
- 如果根结点发生了变化，它会触发 pending 事件。然而，默认情况下，它不会更新 DOM 以展示 fallback 内容。取而代之的是，它会继续展示旧的 DOM，直到新组件准备就绪。这个行为可以通过 timeout prop 进行控制。这个值是一个毫秒数，告诉 组件多久之后展示 fallback。如果这个值是 0 则表示它在 进入等待状态时会立即显示。
参考文档
捕获suspense请求中的错误
import { onErrorCaptured,ref } from 'vue';
export default {
components: { AsyncShow,DogShow },
name: 'App',
setup(){
const error=ref(null)
onErrorCaptured((e:any)=>{
error.value=e
return true
})
return {
error
}
}
};
参考文档
Original: https://www.cnblogs.com/Dewumu/p/16059344.html
Author: 德乌姆列特
Title: Teleport&Suspense
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/607054/
转载文章受原作者版权保护。转载请注明原作者出处！