使用场景： 在不同的情况下展示相应的组件。

在日常开发中，当我们考虑到要简化代码的情况下，我们要进行模块化，写很多组件，如何动态展示组件呢？

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