Vue内置组件的component标签

news2025/1/23 17:36:38

component标签:它的用途是可以动态绑定我们的组件,根据数据不同更换不同的组件.

有一个is属性,is的作用就是显示指定的组件

官方说明:渲染一个“元组件”为动态组件。依 is 的值,来决定哪个组件被渲染

使用方式也很简单,只要把想要显示的组件,放到is属性中就行

<component :is="currentComponent" ></component>

import currentComponent from './currentComponent '

重点是它可以动态绑定我们的组件,可以提升我们的开发效率

应用场景:

我认为只要是需要多个组件展示,都能使用

就比如我有10几个tab,每个tab中都有个组件,将需要循环展示的组件放入currentTabComponent(自定义)中,通过v-for实现

导入组件

 组件数组:

在来看看没有用component标签

 还有很长我就不一一写出来了。。。component标签这样减少很多冗余的代码,本身要几十行的代码,一行就搞定了。提升开发效率,对组件更好操控。也可以做一些简单的切换,权限管控之类的。

应该还有别的用途,暂时知道就记录这些,希望有大佬帮我补充。              ---初入前端的小材

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408158.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

nvue基础快速入门

一、uniapp连接手机 1、用USB让手机和电脑连接 2、点击3---8次手机版本信息打开开发者模式 3、在更多设置里面找到开发者选项 4、打开USB调试和允许手机可以USB安装&#xff0c;以及不要让手机只允许充电&#xff0c;要打开文件传输模式&#xff08;在手机消息栏里面会有提示…

前后端交互流程

1.前后端交互: 前后端交互&#xff0c;也可以理解为数据交互。前端需要获取&#xff08;GET&#xff09;的数据获取上传&#xff08;POST&#xff09;的数据&#xff0c;要通过 请求 来完成的&#xff0c;前端发送请求&#xff0c;后端接收到请求后&#xff0c;便进行对数据库…

若依移动端Ruoyi-App——引入uview2.0开发项目

1. 背景&#xff1a; 若依移动端Ruoyi-App只有个人中心&#xff0c;登录&#xff0c;其他模块都是建设中&#xff0c;因uniapp本身样式不够美观&#xff0c;所以本文基于ruoyi移动端引入uview2.0&#xff0c;实现基本功能。 RuoYi-App: &#x1f389; RuoYi APP 移动端框架&am…

element plus 的表单form使用详解

首先在你需要使用form组件的Vue文件里引入 import type { FormInstance } from element-plus 拿这一张图解释一下属性&#xff0c;第一项ref"ruleFormRef",&#xff0c;ruleFormRef就是我们定义并使用各个属性的必要条件&#xff0c;const ruleFormRef ref<Form…

vue 项目启动失败 ‘webpack-dev-server‘ 不是内部或外部命令,也不是可运行的程序

报错描述 我使用命令 npm run dev 启动项目 报了下面的错。 webpack-dev-server 不是内部或外部命令&#xff0c;也不是可运行的程序 > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js webpack-dev-server 不是内部或外部命令&#xff0c;也不…

Vue3 框架使用报错以及解决办法

1、TypeError: Failed to fetch dynamically imported module: 引入组件时&#xff0c;没有添加.vue后缀 或者引入的组建没有被使用 2、SyntaxError: The requested module /node_modules/_schart.js3.0.4schart.js/lib/sChart.min.js?v0343bb8c does not provide an export…

前后端分离项目,如何解决跨域问题?

跨域问题是前后端分离项目中非常常见的一个问题&#xff0c;举例来说&#xff0c;编程猫&#xff08;codingmore&#xff09;学习网站的前端服务跑在 8080 端口下&#xff0c;后端服务跑在 9002 端口下&#xff0c;那么前端在请求后端接口的时候就会出现跨域问题。 403 Forbidd…

在uniapp中获取可视区域的高度(uni.getSystemInfo)

前言在实际开发中我们会遇到不确定高度的情况&#xff0c;那么在uniapp中我们如何获取区域的高度呐&#xff1f;一起来看看吧使用到的&#xff1a;uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息uni.getSystemInfo(OBJECT)异步获取系…

Google Chrome装到D盘的方法

1. 下载chrome安装包 Google Chrome 网络浏览器 2. 创建自定义安装目录 D:\Program Files\Google\Chrome 3. 创建个人数据目录 D:\Program Files\Google\PersonData 4. 创建chrome浏览器的默认安装目录&#xff08;目录中的文件删除掉&#xff09; C:\Program Files\Google …

手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】

???作者&#xff1a;bug菌 博客&#xff1a;CSDN、掘金等 ??公众号&#xff1a;猿圈奇妙屋 ??特别声明&#xff1a;原创不易&#xff0c;转载请附上原文出处链接和本文声明&#xff0c;谢谢配合。 ??版权声明&#xff1a;文章里可能部分文字或者图片来源于互联网或者百…

React中CodeMirror插件的使用及封装

目录 一、CodeMirror是什么 二、React中CodeMirror的基本使用介绍 &#xff08;一&#xff09;引入CodeMirror 1. 安装CodeMirror插件 2.引入 CodeMirror 插件 &#xff08;二&#xff09;引入文件配置 &#xff08;三&#xff09;关键属性解读 1.value 2.mode 3.the…

Vue3 从零开始 搭建 简单 干净 的 后台管理系统

前言&#xff1a; 记得自己大二时&#xff08;2017年&#xff09;&#xff0c;想搭建一个后台管理系统&#xff0c;当时头脑想的是用原生JS写的。我肯定干不出来&#xff0c;后来乖乖用了当时比较流行的layui&#xff0c;就算现在也真的难以做下去。 这几天&#xff0c;有了需…

微信小程序如何将表单的数据发送到数据库,云开发,并实现将数据渲染到页面中

一、表单数据发送到数据库 1. 利用bindsubmit来写一个函数 <form bindsubmit"bindSubmit"><view class"form_border"><label>收件人名称:</label><input name"userName" auto-focus placeholder" 请填写收件…

【Java编程指南】语法基础

目录 一、前言 二、关键字 三、数据类型 1.存储单元 2.存储范围 3.类型转换 四、常量 五、变量 六、标识符 七、注释 一、前言 学习目标 1&#xff1a;熟悉Java的关键字、数据类型&#xff08;包括范围&#xff09;、常量与变量的区别 学习目标 2&#xff1a;类型转…

Java项目中利用飞书自定义机器人Webhook向飞书群推送告警通知

今天来看一下如何在Java项目中利用飞书的自定义机器人Webhook向飞书群推送告警通知 一、功能场景 企业存在给特定群组自动推送消息的需求&#xff0c;比如&#xff1a;监控报警推送、销售线索推送、运营内容推送等。 你可以在群聊中添加一个自定义机器人&#xff0c;通…

vue-print 实现打印功能

目录一、安装1. Vue22. Vue3二、基本使用1. 直接打印页面HTML2. 个性化设置3. 打印URL三、API一、安装 1. Vue2 npm install vue-print-nb --saveimport Print from vue-print-nb // Global instruction Vue.use(Print);//or// Local instruction import print from vue-pri…

选 择 器

目录 1、三种基本选择器&#xff08;重要&#xff09; &#xff08;1&#xff09;基本选择器 &#xff08;2&#xff09;类选择器 class &#xff08;3&#xff09;id选择器 2、层次选择器 &#xff08;1&#xff09;后代选择器 &#xff08;2&#xff09;子选择器 &am…

【JavaScript速成之路】JavaScript内置对象--数组对象

&#x1f4c3;个人主页&#xff1a;「小杨」的csdn博客 &#x1f525;系列专栏&#xff1a;【JavaScript速成之路】 &#x1f433;希望大家多多支持&#x1f970;一起进步呀&#xff01; 文章目录前言数组对象1&#xff0c;数组类型检测2&#xff0c;数组元素增删3&#xff0c;…

【面试题】面试官:如果后端给你 1w 条数据,你如何做展示?

最近一位朋友参加阿b的面试&#xff0c;然后面试官问了她这个问题&#xff0c;我问她咋写的&#xff0c;她一脸淡定的说&#xff1a;“虚拟列表。”大厂面试题分享 面试题库前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★地址&#xff1a;前端面…

canvas简易使用教程

简介:<canvas> </canvas> 是 HTML5 新增的&#xff0c;一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑(如照片集)以及…