面试题：什么是 Vue 的动态组件？它适用于哪些场景？

什么是 Vue 的动态组件？

Vue 的动态组件是通过 <component> 元素和 is 属性来实现的。它允许你在同一个挂载点动态切换不同的组件。is 属性的值可以是一个组件的名称或一个组件的选项对象。

基本用法


<template>
  <component :is="currentComponent"></component>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>
<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>
<template>
  <component :is="currentComponent"></component>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

在上面的例子中，currentComponent 的值决定了当前渲染的是 ComponentA 还是 ComponentB。

动态组件适用于哪些场景？

动态组件非常适合以下场景：

1. 选项卡切换

在选项卡式界面中，不同的选项卡内容可能对应不同的组件。使用动态组件可以轻松实现选项卡内容的切换。


<template>
  <div>
    <button @click="currentTab = 'TabA'">Tab A</button>
    <button @click="currentTab = 'TabB'">Tab B</button>
    <component :is="currentTab"></component>
  </div>
</template>
<script>
import TabA from './TabA.vue';
import TabB from './TabB.vue';
export default {
  data() {
    return {
      currentTab: 'TabA'
    };
  },
  components: {
    TabA,
    TabB
  }
};
</script>
<template>
  <div>
    <button @click="currentTab = 'TabA'">Tab A</button>
    <button @click="currentTab = 'TabB'">Tab B</button>
    <component :is="currentTab"></component>
  </div>
</template>

<script>
import TabA from './TabA.vue';
import TabB from './TabB.vue';

export default {
  data() {
    return {
      currentTab: 'TabA'
    };
  },
  components: {
    TabA,
    TabB
  }
};
</script>
<template>
  <div>
    <button @click="currentTab = 'TabA'">Tab A</button>
    <button @click="currentTab = 'TabB'">Tab B</button>
    <component :is="currentTab"></component>
  </div>
</template>

<script>
import TabA from './TabA.vue';
import TabB from './TabB.vue';

export default {
  data() {
    return {
      currentTab: 'TabA'
    };
  },
  components: {
    TabA,
    TabB
  }
};
</script>

2. 条件渲染

在某些情况下，你可能需要根据某些条件渲染不同的组件。动态组件可以简化这种条件渲染的逻辑。


<template>
  <component :is="userType === 'admin' ? AdminPanel : UserPanel"></component>
</template>
<script>
import AdminPanel from './AdminPanel.vue';
import UserPanel from './UserPanel.vue';
export default {
  data() {
    return {
      userType: 'user' // 可能来自 API 或其他逻辑
    };
  },
  components: {
    AdminPanel,
    UserPanel
  }
};
</script>
<template>
  <component :is="userType === 'admin' ? AdminPanel : UserPanel"></component>
</template>

<script>
import AdminPanel from './AdminPanel.vue';
import UserPanel from './UserPanel.vue';

export default {
  data() {
    return {
      userType: 'user' // 可能来自 API 或其他逻辑
    };
  },
  components: {
    AdminPanel,
    UserPanel
  }
};
</script>
<template>
  <component :is="userType === 'admin' ? AdminPanel : UserPanel"></component>
</template>

<script>
import AdminPanel from './AdminPanel.vue';
import UserPanel from './UserPanel.vue';

export default {
  data() {
    return {
      userType: 'user' // 可能来自 API 或其他逻辑
    };
  },
  components: {
    AdminPanel,
    UserPanel
  }
};
</script>

3. 动态表单

在动态表单中，不同的字段类型可能需要不同的输入组件。使用动态组件可以根据字段类型动态渲染相应的输入组件。


<template>
  <div v-for="field in fields" :key="field.name">
    <component :is="field.component" v-model="field.value"></component>
  </div>
</template>
<script>
import TextInput from './TextInput.vue';
import SelectInput from './SelectInput.vue';
export default {
  data() {
    return {
      fields: [
        { name: 'username', component: 'TextInput', value: '' },
        { name: 'country', component: 'SelectInput', value: '' }
      ]
    };
  },
  components: {
    TextInput,
    SelectInput
  }
};
</script>
<template>
  <div v-for="field in fields" :key="field.name">
    <component :is="field.component" v-model="field.value"></component>
  </div>
</template>

<script>
import TextInput from './TextInput.vue';
import SelectInput from './SelectInput.vue';

export default {
  data() {
    return {
      fields: [
        { name: 'username', component: 'TextInput', value: '' },
        { name: 'country', component: 'SelectInput', value: '' }
      ]
    };
  },
  components: {
    TextInput,
    SelectInput
  }
};
</script>
<template>
  <div v-for="field in fields" :key="field.name">
    <component :is="field.component" v-model="field.value"></component>
  </div>
</template>

<script>
import TextInput from './TextInput.vue';
import SelectInput from './SelectInput.vue';

export default {
  data() {
    return {
      fields: [
        { name: 'username', component: 'TextInput', value: '' },
        { name: 'country', component: 'SelectInput', value: '' }
      ]
    };
  },
  components: {
    TextInput,
    SelectInput
  }
};
</script>

4. 路由视图

在某些情况下，你可能需要根据路由参数动态渲染不同的组件。虽然 Vue Router 已经提供了 <router-view>，但在某些复杂场景下，动态组件可以作为一种补充。


<template>
  <component :is="componentMap[$route.params.type]"></component>
</template>
<script>
import TypeA from './TypeA.vue';
import TypeB from './TypeB.vue';
export default {
  computed: {
    componentMap() {
      return {
        'a': 'TypeA',
        'b': 'TypeB'
      };
    }
  },
  components: {
    TypeA,
    TypeB
  }
};
</script>
<template>
  <component :is="componentMap[$route.params.type]"></component>
</template>

<script>
import TypeA from './TypeA.vue';
import TypeB from './TypeB.vue';

export default {
  computed: {
    componentMap() {
      return {
        'a': 'TypeA',
        'b': 'TypeB'
      };
    }
  },
  components: {
    TypeA,
    TypeB
  }
};
</script>
<template>
  <component :is="componentMap[$route.params.type]"></component>
</template>

<script>
import TypeA from './TypeA.vue';
import TypeB from './TypeB.vue';

export default {
  computed: {
    componentMap() {
      return {
        'a': 'TypeA',
        'b': 'TypeB'
      };
    }
  },
  components: {
    TypeA,
    TypeB
  }
};
</script>