vue动态加载组件

前端小小白zyw

于 2019-07-08 18:23:15 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/Vue2018/article/details/95080621

Vue 专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何在Vue中使用component is属性动态加载不同组件。通过点击按钮，可以切换加载A组件或B组件，实现组件的动态替换。代码示例展示了如何在方法中根据id参数动态指定要加载的组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用component is 属性动态加载组件：点击button分别加载A、B组件

<template>
	<div>
		<button @click="show('A')">点击加载A组件</button>
		<button @click="show('B')">点击加载B组件</button>
		<component :is="name" />
	</div>
</template>
<script>
  export default {
    data () {
      return {
        name:''
      }
    },
    methods:{
      show(id){
        switch (id){
          case 'A':
            this.name = () => import('../components/A.vue')
            break;
          case 'B':
            this.name = () => import('../components/B.vue')
            break;
        }
      }
    }
  }
</script>