位置: IT常识 - 正文

Vue动态组件 component :is的使用(vue动态组件component原理)

编辑:rootadmin
Vue动态组件 component :is的使用

推荐整理分享Vue动态组件 component :is的使用(vue动态组件component原理),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue动态组件component如何调用方法,vue动态组件component,vue动态组件component,vue动态组件component is属性,vue动态组件component传值,vue动态组件component原理,vue动态组件component,vue动态组件component,内容如对您有帮助,希望把文章链接给更多的朋友!

vue 动态组件用于实现在指定位置上,动态加载不同的组件,核心代码为:

<component :is="componentTag"></component>data() { return { componentTag: '', }}

componentTag 为自定义的变量,将需要加载的组件名赋值给它,即可在<component />标签出现的位置,渲染该组件。

代码示范<template> <div style="padding: 30px"> <button @click="change('1')">组件1</button> <button @click="change('2')">组件2</button> <button @click="change('3')">组件3</button> <component :is="componentTag"></component> </div></template><script> import component1 from './component1' import component2 from './component2' import component3 from './component3' export default { components: {component1, component2, component3}, data() { return { componentTag: '', } }, methods: { change(index) { this.componentTag = 'component' + index }, } }</script><style scoped></style>

src/page/component1.vue

<template> <div> <h3>组件1—文字</h3> <span>我爱你,中国!</span> </div></template><script> export default { name: "component1" }</script><style scoped></style>

src/page/component2.vue

<template> <div> <h3>组件2-图片</h3> <img src="https://www.yuucn.com/wp-content/uploads/2022/03/1648645331-ccb34a595cb926f.png" alt=""> </div></template><script> export default { name: "component2" }</script><style scoped></style>

src/page/component3.vue

<template> <div> <h3>组件3—输入框</h3> <input type="text"> </div></template><script> export default { name: "component3" }</script><style scoped></style>效果展示点击按钮组件1

点击按钮组件2Vue动态组件 component :is的使用(vue动态组件component原理)

点击按钮组件3

以上原文链接:vue 动态组件【详解】component :is_朝阳39的博客-CSDN博客_component is

 component :is用法进阶之组件内引入多个组件<component :is="detailComponentName" />import components from './components'export default { components: { ...components }}

src/components/index.js

const ctx = require.context('./common', false, /\.vue$/)const components = {}console.log(ctx, 'ctx---打印出./common文件下(不包含子文件夹),以.vue结尾的文件')console.log( ctx.keys(), 'ctx.keys()---返回./common文件下(不包含子文件夹),以.vue结尾的文件的数组')for (const key of ctx.keys()) { // 剥去文件名开头的 `./` 和`.vue`结尾的扩展名 const module = key.replace(/^\.\//, '').replace(/\.vue$/, '') components[module] = ctx(key).default console.log(module, 'module---去掉`./`开头 和`.vue`结尾后的文件名') console.log( components[module], 'components[module]---拿到ctx文件(包括html和default)' )}console.log(components, 'components---这些ctx文件集合')export default components

此处解释该index.js文件:

require.context( directory, useSubdirectories, regExp )

directory{String}-读取文件的路径。useSubdirectories{Boolean}-是否遍历文件的子目录。regExp{RegExp}-匹配文件的正则。

require.context('./', false, /\.vue$/) 检索components文件下的文件,不检索子文件夹,匹配以.vue结尾的文件。

 

 

本文链接地址:https://www.jiuchutong.com/zhishi/295679.html 转载请保留说明!

上一篇:分配股利在报表哪里体现(分配股利账务处理)

下一篇:web前端面试高频考点——Vue的高级特性(动态组件、异步加载、keep-alive、mixin、Vuex、Vue-Router)(web前端面试题最新)

  • 网店推广方式有哪些(网店推广方式有几种具体是哪些)

    网店推广方式有哪些(网店推广方式有几种具体是哪些)

  • 他通过几个月学会了移动营销 只因知道这3点(通过几个月的努力取得了明显的成绩修改病句)

    他通过几个月学会了移动营销 只因知道这3点(通过几个月的努力取得了明显的成绩修改病句)

  • 小米10青春版刷新率是多少(小米10青春版刷新率90hz)

    小米10青春版刷新率是多少(小米10青春版刷新率90hz)

  • 显示器输入不支持(显示器输入不支援怎么改回来)

    显示器输入不支持(显示器输入不支援怎么改回来)

  • 快手连麦申请受限是怎么办(快手申请连麦是语音还是视频)

    快手连麦申请受限是怎么办(快手申请连麦是语音还是视频)

  • 知道微信号可以查出来什么信息(知道微信号可以加好友吗)

    知道微信号可以查出来什么信息(知道微信号可以加好友吗)

  • 怎么修复解析包错误(解析包损坏怎么办)

    怎么修复解析包错误(解析包损坏怎么办)

  • 微信窗口在哪里打开(微信跳转链接)

    微信窗口在哪里打开(微信跳转链接)

  • 华为nova5特殊功能(华为nova5功能)

    华为nova5特殊功能(华为nova5功能)

  • 三星平板系统崩溃怎么办(三星平板变砖怎么办)

    三星平板系统崩溃怎么办(三星平板变砖怎么办)

  • telecomm已停止运行什么意思(telecom已停运怎么办)

    telecomm已停止运行什么意思(telecom已停运怎么办)

  • 苹果耳机加减没反应(苹果耳机加减没有声音)

    苹果耳机加减没反应(苹果耳机加减没有声音)

  • a1491是ipad几(平板a1491是ipad几代?)

    a1491是ipad几(平板a1491是ipad几代?)

  • 爱奇艺会员怎么赠送(爱奇艺会员怎么取消自动续费)

    爱奇艺会员怎么赠送(爱奇艺会员怎么取消自动续费)

  • 微信位置共享能听到对方说话吗(微信位置共享能一直开着吗)

    微信位置共享能听到对方说话吗(微信位置共享能一直开着吗)

  • 手机卡恢复出厂设置有用吗(手机卡恢复出厂设置能不卡了吗?)

    手机卡恢复出厂设置有用吗(手机卡恢复出厂设置能不卡了吗?)

  • 荣耀9x防水级别多少(荣耀9x的防水等级)

    荣耀9x防水级别多少(荣耀9x的防水等级)

  • vivo怎么解除来电转接(vivo怎么解除来电转接功能)

    vivo怎么解除来电转接(vivo怎么解除来电转接功能)

  • 粉笔账号怎么多人用(粉笔app账号可以几个人用)

    粉笔账号怎么多人用(粉笔app账号可以几个人用)

  • 苹果深色模式怎么使用(苹果深色模式怎么设置快捷)

    苹果深色模式怎么使用(苹果深色模式怎么设置快捷)

  • 如何导出ppt中的音频(如何导出ppt中的文字)

    如何导出ppt中的音频(如何导出ppt中的文字)

  • 微信怎么发显示全文的(微信怎么发显示一秒的长语音)

    微信怎么发显示全文的(微信怎么发显示一秒的长语音)

  • vivo23nfc功能在哪里打开(vivonfc在哪里)

    vivo23nfc功能在哪里打开(vivonfc在哪里)

  • 微信群里发错消息撤不回来怎么办(微信群里发错消息撤回了别人还能看到吗)

    微信群里发错消息撤不回来怎么办(微信群里发错消息撤回了别人还能看到吗)

  • axios上传文件错误:Current request is not a multipart request(axios提交文件)

    axios上传文件错误:Current request is not a multipart request(axios提交文件)

  • python中合并表格的两种方法(python合并多个excel)

    python中合并表格的两种方法(python合并多个excel)

  • 个税是按照实发工资计算吗
  • 小微企业季度平均资产看每季度吗
  • 10个税点怎么计算公式
  • 管理费用怎么结转成本
  • 展位费怎么入账
  • 可以税前扣除的商业健康保险有哪些
  • 应付福利费余额在借方
  • 农产品代销合同协议书范本
  • 收到的货款与发票数不符,怎么做账
  • 企业注销建造师流程
  • 如果增值税发票丢了好的怎么办有谁交罚熬一
  • 销项税额与进项税额区别
  • 机动车销售发票如何补开?
  • 社保不报的情况下保险报销吗
  • 房地产停车场属于公共配套设施吗
  • 投资性房地产转为存货
  • 销售已作进项税转出的固定资产怎样缴税?
  • 母子公司合并报表什么时候做
  • 一般纳税人增值税及附加税费申报表怎么填
  • 外籍人士可以回国吗
  • 委托个人加工应税消费品纳税地点
  • 增值税查补税款可以开发票吗
  • 持有至到期投资科目被取消了吗
  • 当月作废的发票是否需要报税
  • 大学期末 知乎
  • 取得专用发票是进项还是销项
  • 大型机械拆装
  • 冲销货款的会计分录
  • PHP:oci_num_fields()的用法_Oracle函数
  • 笔记本电池保养注意事项
  • msmpeng.exe是什么程序
  • 企业退货产生的损失谁承担
  • ipad3性价比
  • 什么是加计扣除政策
  • 33.JavaScript映射与集合(Map、Set)数据类型基础知识介绍与使用
  • anaconda3.5.2安装教程
  • seaborn库的特点
  • ajax自动带cookie
  • 织梦如何使用
  • 织梦系统
  • 详解帝国cms图集大全
  • 在建工程账务核算及处理
  • 长期待摊费用是什么意思
  • 只有收入没有成本怎么做账
  • 借贷记账法的基本规则和账户结构
  • 股权转让会计分录借银行存款
  • 政府奖励金怎么发放
  • 出口抵减内销产品应纳税额
  • 购买无形资产的手续费计入
  • 现金付给对方没写收据怎么办
  • 发票开出来对方不走账会怎么样?
  • 公司给别人公司过账应该注意哪些
  • 上年度会计凭证怎么填
  • 划拨土地使用权管理暂行办法
  • 什么是应收账款保理
  • 专票遗失没有认证能用吗
  • 印花税属于什么科目
  • windows防病毒
  • Vista和Server08 SP2 RTM-Escrow发放给测试者
  • linux系统硬盘分区
  • ubuntu系统升级到18
  • centos基本环境
  • linux 应用程序
  • wysafe.exe是什么
  • xp 更新
  • win10预览体验三个选项
  • win8如何更改用户名字?
  • 如何装win8.1
  • win10安装软件点击没反应
  • bootstrap轮播插件
  • 牛叉叉旗舰店没有了改名成啥了
  • perl常用函数
  • jquery转dom
  • jquery+ajax实现省市区三级联动效果简单示例
  • socket怎么用
  • 深入理解中国式现代化
  • jquery函数大全
  • jquerycuishifeng
  • 详解js跨域原理是什么
  • 广东省地方税务局公告2017年第7号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设