Vue3 入坑 Chapter 5
Fragment(片斷)
- 在Vue2中: 組件必須有一個根標簽
- 在Vue3中: 組件可以沒有根標簽, 內(nèi)部會將多個標簽包含在一個Fragment虛擬元素中
- 好處: 減少標簽層級, 減小內(nèi)存占用
<template>
<h2>aaaa</h2>
<h2>aaaa</h2>
</template>
Teleport(瞬移)
- Teleport 提供了一種干凈的方法, 讓組件的html在父組件界面外的特定標簽(很可能是body)下插入顯示
父級組件
<template>
<div class="teleportChildTest">
<button @click="modelOpen=true">打開對話框</button>
<!-- 對話框代碼 -->
<Teleport to="body">
<div v-if="modelOpen">
<div>我是一個對話框</div>
<button @click="modelOpen=false">關(guān)閉對話框</button>
</div>
</Teleport>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'teleportChildTest',
setup () {
const modelOpen = ref(false)
return {
modelOpen
}
}
})
</script>
<style lang="scss" scoped>
</style>
子級組件
<template>
<div class="teleportChildTest">
<button @click="modelOpen=true">打開對話框</button>
<!-- 對話框代碼 -->
<Teleport to="body">
<div v-if="modelOpen">
<div>我是一個對話框</div>
<button @click="modelOpen=false">關(guān)閉對話框</button>
</div>
</Teleport>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'teleportChildTest',
setup () {
const modelOpen = ref(false)
return {
modelOpen
}
}
})
</script>
<style lang="scss" scoped>
</style>
Suspense(不確定的)
- 它們允許我們的應(yīng)用程序在等待異步組件時渲染一些后備內(nèi)容，可以讓我們創(chuàng)建一個平滑的用戶體驗
人話: 頁面中需要顯示一個異步組件, 但是異步組件需要過一段時間再顯示, 異步組件在顯示之前需要顯示點別東西
父組件
<template>
<div class="default">
<h2>Suspense組件的使用</h2>
<hr />
<suspense>
<template v-slot:default>
<!-- 異步組件 -->
<async-component></async-component>
</template>
<template v-slot:fallback>
<!-- Loading的方法 -->
<h2>Loading</h2>
</template>
</suspense>
</div>
</template>
<script lang="ts">
import { defineComponent, defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() => import('@/components/AsyncComponent.vue'))
export default defineComponent({
name: 'default',
components: { AsyncComponent },
setup () {
return {}
}
})
</script>
<style lang="scss" scoped>
</style>
子組件
<template>
<div class="AsyncComponent">
<h3>AsyncComponent子級組件</h3>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'AsyncComponent',
setup () {
return {}
}
})
</script>
<style lang="scss" scoped>
</style>
