Vue 2.0->3.0学习笔记(Vue 3 (五)- 新的组件)

Vue 2.0->3.0学习笔记(Vue 3 (五)- 新的组件)

  • 新的组件
    • [1. Fragment](#1. Fragment)
    • [2. Teleport](#2. Teleport)
    • [3. Suspense](#3. Suspense)

新的组件

1. Fragment

笔记

  • 在Vue2中: 组件必须有一个根标签
  • 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
  • 好处: 减少标签层级, 减小内存占用

2. Teleport

笔记

  • 什么是Teleport?------ Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。
js 复制代码
<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>
  • 目录
  • Child.vue
javascript 复制代码
<template>
	<div class="child">
		<h3>我是Child组件</h3>
		<Son/>
	</div>
</template>

<script>
	import Son from './Son'
	export default {
		name:'Child',
		components:{Son},
	}
</script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
</style>
  • Dialog.vue
javascript 复制代码
<template>
	<div>
		<button @click="isShow = true">点我弹个窗</button>
		<teleport to="body">
			<div v-if="isShow" class="mask">
				<div class="dialog">
					<h3>我是一个弹窗</h3>
					<h4>一些内容</h4>
					<h4>一些内容</h4>
					<h4>一些内容</h4>
					<button @click="isShow = false">关闭弹窗</button>
				</div>
			</div>
		</teleport>
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name:'Dialog',
		setup(){
			let isShow = ref(false)
			return {isShow}
		}
	}
</script>

<style>
	.mask{
		position: absolute;
		top: 0;bottom: 0;left: 0;right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.dialog{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 300px;
		height: 300px;
		background-color: green;
	}
</style>
  • Son.vue
javascript 复制代码
<template>
	<div class="son">
		<h3>我是Son组件</h3>
		<Dialog/>
	</div>
</template>

<script>
	import Dialog from './Dialog.vue'
	export default {
		name:'Son',
		components:{Dialog}
	}
</script>

<style>
	.son{
		background-color: orange;
		padding: 10px;
	}
</style>
  • App.vue
javascript 复制代码
<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Child/>
	</div>
</template>

<script>
	import Child from './components/Child'
	export default {
		name:'App',
		components:{Child},
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>
  • main.js
javascript 复制代码
//引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象------app(类似于之前Vue2中的vm,但app比vm更"轻")
const app = createApp(App)

//挂载
app.mount('#app')

3. Suspense

笔记

  • 等待异步组件时渲染一些额外内容,让应用有更好的用户体验
  • 使用步骤:
  • 异步引入组件

    js 复制代码
    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
  • 使用Suspense包裹组件,并配置好defaultfallback

    vue 复制代码
    <template>
    	<div class="app">
    		<h3>我是App组件</h3>
    		<Suspense>
    			<template v-slot:default>
    				<Child/>
    			</template>
    			<template v-slot:fallback>
    				<h3>加载中.....</h3>
    			</template>
    		</Suspense>
    	</div>
    </template>
  • 目录
  • Child.vue
javascript 复制代码
<template>
	<div class="child">
		<h3>我是Child组件</h3>
		{{sum}}
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name:'Child',
		async setup(){
			let sum = ref(0)
			let p = new Promise((resolve,reject)=>{
				setTimeout(()=>{
					resolve({sum})
				},3000)
			})
			return await p
		}
	}
</script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
</style>
  • App.vue
javascript 复制代码
<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>稍等,加载中...</h3>
			</template>
		</Suspense>
	</div>
</template>

<script>
	// import Child from './components/Child'//静态引入
	import {defineAsyncComponent} from 'vue' 
	const Child = defineAsyncComponent(()=>import('./components/Child')) //异步引入
	export default {
		name:'App',
		components:{Child},
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>
  • main.js
javascript 复制代码
//引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数
import { createApp } from 'vue'
import App from './App.vue'

//创建应用实例对象------app(类似于之前Vue2中的vm,但app比vm更"轻")
const app = createApp(App)

//挂载
app.mount('#app')
  • 本文仅作个人学习笔记使用,无商业用途。
  • 上述内容笔记大部分摘自"B站尚硅谷"
  • 如若转载,请先声明。
相关推荐
brzhang3 分钟前
实时通信的那些事儿:短轮询、长轮询、SSE 和 WebSocket 到底怎么选?
前端·后端·架构
玄魂8 分钟前
开源之夏2025-VisActor 社区题目及参赛者选/培介绍
前端·开源·资讯
camellia9 分钟前
SpringBoot(二十四)SpringBoot集成redis哨兵集群
java·前端·后端
OpenLoong 开源社区10 分钟前
技术视界 | 数据的金字塔:从仿真到现实,机器人学习的破局之道
人工智能·学习·机器人·开源社区·人形机器人·openloong
YH丶浩12 分钟前
React 实现爱心花园动画
前端·react.js·前端框架
啵啵学习19 分钟前
浏览器插件,提示:此扩展程序未遵循 Chrome 扩展程序的最佳实践,因此已无法再使用
前端·chrome·浏览器·插件·破解
崔高杰20 分钟前
On the Biology of a Large Language Model——Claude团队的模型理解文章【论文阅读笔记】其二——数学计算部分
论文阅读·人工智能·笔记·语言模型·nlp
Small踢倒coffee_氕氘氚22 分钟前
iPhone闹钟无法识别调休致用户迟到,苹果客服称会记录反馈
笔记·算法·灌灌灌灌
Mintopia25 分钟前
# 使用 Three.js 实现带随机障碍物的小车行驶模拟
前端·javascript·three.js
Mintopia26 分钟前
图形学与坐标系入门教学
前端·javascript·计算机图形学