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等指令来控制显示隐藏。

相关推荐
打不着的大喇叭38 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code44 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了1 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
susnm1 小时前
Dioxus 与数据库协作
前端·rust