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

相关推荐
虾球xz3 分钟前
游戏引擎学习第308天:调试循环检测
前端·c++·学习·算法·游戏引擎
魔云连洲14 分钟前
浏览器强缓存还未过期,但服务器资源已经变了怎么办?
前端·缓存·浏览器
diygwcom34 分钟前
功能强大且易于使用的 JavaScript 音频库howler.js 和AI里如何同时文字跟音频构思想法
开发语言·javascript·音视频
坚定信念,勇往无前1 小时前
threejs 四元数(Quaternion)和欧拉角(Euler)学习
javascript·学习
程序员Bears1 小时前
实战教程:基于Vue.js与Django REST Framework的任务管理SPA开发全流程
前端·vue.js·django
软件技术NINI1 小时前
html css js网页制作成品——HTML+CSS+js宁夏银川网页设计(5页)附源码
javascript·css·html
我科绝伦(Huanhuan Zhou)1 小时前
关系数据库基础入门
前端·数据库·mysql
心.c2 小时前
TypeScript入门到精通
前端·javascript·typescript
不爱学英文的码字机器2 小时前
微前端架构:从单体到模块化的前端新革命
前端·架构
Qredsun3 小时前
vue--ofd/pdf预览实现
前端·vue.js·pdf