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

相关推荐
艾小码1 分钟前
前端人必看!3个技巧让你彻底搞懂JS条件判断与循环
前端·javascript
灵感__idea8 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡8 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo8 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel8 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld8 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel8 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi9 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_4569042710 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki10 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构