18-Vue3中一些新的组件

目录

  • 1、Fragment
  • 2、Teleport
  • 3、Suspense

1、Fragment

  • 在Vue2中: 组件必须有一个根标签
  • 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
  • 好处: 减少标签层级, 减小内存占用
    18-Vue3中一些新的组件_第1张图片

2、Teleport

  • 什么是Teleport?—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

    <teleport to="移动位置">
    	<div v-if="isShow" class="mask">
    		<div class="dialog">
    			<h3>我是一个弹窗h3>
    			<button @click="isShow = false">关闭弹窗button>
    		div>
    	div>
    teleport>
    

to=“移动位置”,在to里面写上你想将这个组件html结构移动到哪个位置,如HTML、body、id、class等都可以。

3、Suspense

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

  • 使用步骤:

    • 异步引入组件

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

    • default为默认加载组件,如果defalut一直在加载则先展示fallback里面的内容,增强用户体验。

      <template>
      	<div class="app">
      		<h3>我是App组件h3>
      		<Suspense>
      			<template v-slot:default>
      				<Child/>
      			template>
      			<template v-slot:fallback>
      				<h3>加载中.....h3>
      			template>
      		Suspense>
      	div>
      template>
      

能让v-slot:fallback里面的内容出现有两种方法
1、将网速调慢
2、返回一个异步的promise,让数据等一段时间加载。

简单使用一下Suspense:
结构目录:
在这里插入图片描述

App组件

<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>

child 组件:

<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>

实现效果:
18-Vue3中一些新的组件_第2张图片

你可能感兴趣的:(Vue.js笔记,javascript,前端,前端框架,vue.js)