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

相关推荐
三思而后行,慎承诺31 分钟前
Kotlin和JavaScript的对比
开发语言·javascript·kotlin
阿维的博客日记1 小时前
Can‘t create thread to handle bootstrap
前端·bootstrap·html
kooboo china.1 小时前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(二)
前端·css·编辑器·html·.net
Yensean2 小时前
Learning vtkjs之ImplicitBoolean
javascript·webgl
苹果酱05672 小时前
iview内存泄漏
java·vue.js·spring boot·mysql·课程设计
这儿有一堆花2 小时前
JavaScript 代码搜索框
开发语言·javascript·ecmascript
带娃的IT创业者3 小时前
《Python Web部署应知应会》Flask网站隐藏或改变浏览器URL:从Nginx反向代理到URL重写技术
前端·python·flask
Json____4 小时前
使用vue2 开发一个纯静态的校园二手交易平台-前端项目练习
前端·vue2·前端模板·vue脚手架·校园二手交易平台·项目项目练习
小二·4 小时前
前端技巧——性能优化篇
前端·性能优化
ProgramHan4 小时前
JavaScript性能优化都优化什么
开发语言·javascript·ecmascript