使用场景： 在不同的情况下展示相应的组件。
在日常开发中，当我们考虑到要简化代码的情况下，我们要进行模块化，写很多组件，如何动态展示组件呢？
使用 <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等指令来控制显示隐藏。