Vue动态加载并渲染组件

1

 <template lang='pug'>
  .container
    a-select(v-model='componentName' @change='onchange' style='width:200px' placeholder='请选择组件')
      a-select-option(v-for='item in ["C1","C2","C3"]' :key='item') {{ item }}
      component(:is='current' v-if='current')
</template>
 
<script>
  export default {
    name: 'index',
    data() {
      return {
        componentName: undefined,
        current: null
      }
    },
    methods: {
      onchange(val) {
        this.current = () => import(`./components/${val}`)
      }
    }
  }
</script>

posted on 2023-01-30 20:06 文仲玉阅读(85) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Ant Design of Vue 上传文件状态一直为uploading问题

· provide和inject用法

· vue.js之动态组件

· 如果把vue组件动态添加到body上？

· vue动态挂载组件

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

Vue动态加载并渲染组件

1

路漫漫其修远兮，吾将上下而求索

公告

导航

统计

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<template lang='pug'>
	.container
	a-select(v-model='componentName' @change='onchange' style='width:200px' placeholder='请选择组件')
	a-select-option(v-for='item in ["C1","C2","C3"]' :key='item') {{ item }}
	component(:is='current' v-if='current')
	</template>

	<script>
	export default {
	name: 'index',
	data() {
	return {
	componentName: undefined,
	current: null
	}
	},
	methods: {
	onchange(val) {
	this.current = () => import(`./components/${val}`)
	}
	}
	}
	</script>