首页 > 其他分享 >vue动态引入组件

vue动态引入组件

时间:2023-10-12 10:46:29浏览次数:30  
标签:vue module 引入 MyComponent 组件 动态 加载

vue动态引入组件,正常情况是页面渲染时动态加载该页面组件,还能进行细化动态加载情况,比如弹窗组件
动态导入:除了路由懒加载,你还可以在其他地方使用动态导入来按需加载组件。例如,在某个按钮的点击事件中异步加载一个组件:


import('./components/MyComponent.vue').then((module) => {
  // 在回调中使用异步加载的组件
  const MyComponent = module.default;
  // ...
});

这样,只有当按钮被点击时才会加载组件

标签:vue,module,引入,MyComponent,组件,动态,加载
From: https://www.cnblogs.com/yoona-lin/p/17758916.html

相关文章

  • Vue生命周期
    Vue生命周期什么是Vue生命周期指的是Vue从创建到销毁整个过程在官网中这样说到"每个Vue组件实例在创建时都需要经历一系列的初始化步骤"以及"在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。"官网图示如下  Vue生命周期函数......
  • linux 中 awk直接引入外部变量
     001、[root@pc1test1]#lsa.txt[root@pc1test1]#a=4[root@pc1test1]#cata.txt1[root@pc1test1]#awk'{for(i=1;i<="'$a'";i++)print"xx"}'a.txtxxxxxxxx 。 ......
  • 第十九篇 - Vue如何通过session记住User
    登录成功后前端存储user对象window.sessionStorage.setItem("currentuser",JSON.stringify(successResponse.data.data.user))前端script中使用user对象中的值JSON.parse(sessionStorage.getItem("currentuser")).user_name前端vue中使用user对象的值{{currentuser.usernam......
  • 2.前端框架(Vue)
    前端框架(Vue)Vue概念;vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写;基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上;官网:https://v2.vuejs.org/框架:是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开......
  • 讲述vue中data值都有哪些,如何调用
    讲述vue中data值都有哪些,如何调用1,字符串2,对象3,函数4,数字<html>  <head>  <metacharset="UTF-8">  <metaname="viewport"content="width=device-width,initial-scale=1.0">  <title>vue.js</title> ......
  • 浅谈 Angular 引入 Transfer State 机制的动机
    在Angular之中,TransferState是一个用于在服务器端渲染(SSR)中传递状态的机制。它可以解决应用程序的一些重要问题,比如性能问题和用户体验问题。在这篇文章中,我将详细解释TransferState的概念,工作原理以及如何在Angular应用程序中使用它。首先,我们需要了解什么是服务器......
  • 天合光能组件质量怎么样?至尊组件双面增益达8.82%,高可靠性再获验证
     近日,第三方权威检测认证机构鉴衡进行的极端气候户外实证报告出炉:天合光能至尊600W+系列组件在张北常年多风天气下,运行表现优异,EL图像无缺陷,与至尊600W+单面组件相比,双面组件发电增益高达8.82%。再度证实至尊组件应用于常年大风地区光伏电站的卓越可靠性,用品质护航客户价值。......
  • vue项目打包,解决静态资源无法加载和路由加载无效(404)问题
    打包后的项目静态资源无法使用,导致页面空白静态资源无法使用,那就说明项目打包后,图片和其他静态资源文件相对路径不对,此时找到config里面的index.js,在build模块下加入assetsPublicPath:'./', 如下图所示,    在History模式下配合使用nginx运行打包后的项目当刷新当前路......
  • Vue响应式
    目录Vue中的响应式对象独立的响应式值计算变量监听响应式变量setup方法Vue中的响应式对象Vue3允许在setup()中定义组件需要的数据和方法,通过return在模板中可以直接使用reactive方法<body><divid="Application"></div><script>constApp=Vue......
  • vue框架,input相同标签如何定位-label定位
    一、问题提出:后台前端框架改版,之前是angularjs,现在用vue,导致input标签定位失败,只能定位到第一个input标签,查看后台源代码发现这两个标签是一模一样,如下图:二、问题思考过程1.为什么以前的版本可以定位成功,而现在的就定位不了啦查阅之前版本的这部分定位代码,发现原来的框架是......