首页 > 其他分享 >Vue3中的新的内置组件

Vue3中的新的内置组件

时间:2022-11-11 18:56:52浏览次数:62  
标签:异步 vue 内置 Vue3 组件 路由 加载

在vue2中的内置组件:

  动态路由中的 component :作用:动态显示路由的挂载点,使用 is 属性动态显示组件 ;

        keep-alive :作用:使被包裹的组件保留状态,避免被重新渲染 ;

  路由中的router-link :作用:和 超链接类似,使用 to 属性制定 url 跳转页面 ;

      router-view :路由出口 ;

vue3的新的内置组件:

  Fragment 组件 :

  描述:在 vue2.x 中组件模板必须要一个根标签;但是在 vue3.x 中不再需要一个根标签,它会自 动创建一个 Fragment ;在代码中是不显示的,可以在 vue.develop.js 插件中看到 ;

 

   Suspense 组件:

  作用: 加载异步组件的时候,渲染一些其他内容

  场景: 加载异步组件的时候渲染 加载中

  把组件转换成异步组件的方式:

import { defineAsyncComponent } from 'vue';
const Child = defineAsyncComponent(() => import('./Child.vue'));

  Teleport 组件

  作用: 将指定 DOM 内容移动到指定的某个节点里面(可以理解为将组件挂载到指定节点上面)

  使用场景: 弹框、播放器组件的定位

 

标签:异步,vue,内置,Vue3,组件,路由,加载
From: https://www.cnblogs.com/zhulongxu/p/16881458.html

相关文章

  • vue_01_函数式组件
    函数式组件-全局弹窗组件函数式组件定义1.在template上写上functional2.在exportdefault{}中设置functional为true//方式一<templatefunctional><temp......
  • 2022.11.11 - vue2组件透传解决方案
    template<avue-crudref="crud"v-bind="$attrs"v-on="$listeners"><template#[slotName]="slotProps"v-for="(slot,slotName)in$scopedSlots"......
  • Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
    前文已经初始化了workspace-root,从本文开始就需要依次搭建组件库、example、文档、cli。本文内容是搭建组件库的开发环境。1packages目录前面在项目根目录下创建了p......
  • python的内置函数
    type查看数据的类型number1=100number2=88.88b=Trues1='musen'print('number1的类型:',type(number1))print('number2的类型:',type(number2))print('b......
  • Android实战简易教程-第十枪(画廊组件Gallery实用研究)
    Gallery组件用于拖拽浏览图片,下面我们就来看一下如何实现。一、实现Gallery1.布局文件很简单:<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://......
  • vue中组件化编程
    组件化编程什么是组件化编程传统方式的编写模式组件化编程的模式组件是实现应用中局部功能代码和资源的集合vue中非单文件组件的基本使用点击查看代码<!--Vue......
  • Vue3实现动态导入Excel表格数据
    1. 前言在开发工作过程中,我们会遇到各种各样的表格数据导入,大部分我们的解决方案:提供一个模板前端进行下载,然后按照这个模板要求进行数据填充,最后上传导入,这是其中一种......
  • 从0搭建vue3组件库: Input组件
    本篇文章将为我们的组件库添加一个新成员:Input组件。其中Input组件要实现的功能有:基础用法禁用状态尺寸大小输入长度可清空密码框带Icon的输入框文本域自适应......
  • 关于组件,你真的了解么?
    最近经常听到“组件化开发”,那架构设计里,组件到底如何定义、设计和应用呢,今天我们一起来聊聊。本文主要内容:什么是组件?如何设计组件?如何用组件构建系统?1、什么是组件?组件是......
  • Vue3 的watch 监视属性
    1.监听单个watch(变量,(新值,老值)=>{})2.监听多个watch([变量1,变量2],(新值,老值)=>{})3.监听对象watch(()=>对象,(新值)=>{})4.监听对象属性watch(()=>对象.......