Vue3中新的组件
1. Fragment组件
- 在Vue2中：组件必须有一个根标签
- 在Vue3中： 组件可以没有根标签，Vue内部会将多个标签包含在一个Fragment虚拟元素中
- 好处是：减少标签层级，减少内存占用
提示
Vue3内部为我们的组件套上Fragment标签，因此我们不再必须有一个根标签，我们也不必手动编写，Vue3自动维护Fragment
2. Teleport组件
- 什么是teleport组件？
Teleport是一种能够将我们的组件html结构移动到指定位置的技术。
手搓一个弹出模态框:
vue
<template>
<!-- to属性可以是body,可以是index.html里面的id属性 -->
<Teleport to="dialogNode">
<div v-show="showFlag" class="mask">
<div class="dialog">
<h3>我是标题</h3>
<ul>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</ul>
<button @click="closeDialog">关闭弹窗</button>
</div>
</div>
</Teleport>
</template>
<script setup name="UserDialog">
import { ref, reactive, defineExpose } from 'vue'
let showFlag = ref(false)
let closeDialog = (() => {
showFlag.value = false
})
// 允许外部访问的数据暴露出去
defineExpose({
showFlag
})
</script>
<style scoped>
.mask {
/* 半透明 */
background-color: rgb(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.dialog {
text-align: center;
position: absolute;
/* top，left相对父元素 */
top: 50%;
left: 50%;
/* 相对自己 */
transform: translate(-50%, -50%);
width: 400px;
height: 300px;
background-color: green;
}</style>
vue
<template>
<div>
<button @click="showDialog">打开弹窗</button>
<br />
<UserDialog ref="diglogRef"></UserDialog>
</div>
</template>
<script setup>
import UserDialog from './components/UserDialog.vue'
import { ref, reactive, onMounted } from 'vue'
// 拿到子组件
const diglogRef = ref()
let showDialog = () => {
// 拿到子组件的值showFlag并修改
diglogRef.value.showFlag = true
}
</script>
我是父组件
请稍后。。。
txt
运行效果:
不过官方提示Suspense还是处于实验阶段：
评论