vue动态组件

Nikki_u

于 2022-03-17 19:05:47 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Nikki_u/article/details/123557963

本文介绍了Vue.js中动态组件的使用方法，包括如何导入并注册组件，以及如何通过`<component :is>`指令实现动态切换组件。示例展示了如何根据用户点击按钮在账号密码填写和个人信息填写组件间进行动态切换，为前端开发提供了灵活性。

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

import UserName from '@/components/UserName.vue'
import UserInfo from '@/components/UserInfo.vue'

components:{
  UserInfo,
  UserName
},

<UserName></UserName>
<UserInfo></UserInfo>

import UserName from '@/components/UserName.vue'
import UserInfo from '@/components/UserInfo.vue'

components:{
  UserInfo,
  UserName
},
data () {
  return {
    comName:'UserName'
  }
}

<component :is='comName'></component>

<h1>1、动态dynamic组件使用</h1>
<button @click="comName='UserName'">账号密码填写</button>
<button @click="comName='UserInfo'">个人信息填写</button>