vue.js中如何使用动态组件。

使用场景: 在不同的情况下展示相应的组件。

在日常开发中,当我们考虑到要简化代码的情况下,我们要进行模块化,写很多组件,如何动态展示组件呢?

使用 <component is="" ></component> 标签 is属性的值指的你要展示的组件。

因为我们要动态的去展示组件,所以is要绑定一个变量。

<component :is="currentComponent" ></component>
源码示例

<template>

<div>

<button @click="toggleComponent('HelloWorldVue')">Toggle Component 管理</button>

<button @click="toggleComponent('MsglogIndex')">Toggle Component 开发</button>

<button @click="toggleComponent('LoginIndexVue')">Toggle Component 组织</button>

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

</div>

</template>

<script>

import HelloWorldVue from './components/HelloWorld.vue'

import MsglogIndex from './components/MsglogIndex.vue'

import LoginIndexVue from './components/LoginIndex.vue'

export default {

components: {

HelloWorldVue,

MsglogIndex,

LoginIndexVue

},

data() {

return {

currentComponent: '',

message: 'Hello World!'

}

},

methods: {

toggleComponent(name) {

this.currentComponent = name

console.log(this.currentComponent);

}

}

}

</script>

这时有人可能会有个疑问,我直接使用v-if 去判断是否成立不就行了,为真就显示,为假就隐藏这个组件。

原因:

v-if是一个指令,它可以根据条件来决定是否渲染一个元素或组件。如果条件为真,那么元素或组件就会被渲染;如果条件为假,那么元素或组件就会被销毁,并显示为 。v-if的优点是可以实现条件渲染,节省资源;缺点是每次切换都会触发销毁和创建的过程,消耗性能。

component是一个特殊的标签,它可以在一个挂载点上动态地切换不同的组件。通过is属性来指定要渲染的组件名称。component的优点是可以实现组件的复用和切换,提高灵活性;缺点是需要提前注册所有可能用到的组件,并且不能直接使用v-if等指令来控制显示隐藏。

相关推荐
一洽客服系统8 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead22 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛2 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵2 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6222 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9492 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端