vue

<template>
  <div>
    <!-- 使用 <component> 动态组件 -->
    <button @click="currentComponent = 'Home'">Go to Home</button>
    <button @click="currentComponent = 'About'">Go to About</button>

    <!-- 动态渲染当前组件 -->
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义当前显示的组件
      currentComponent: 'Home'
    };
  },
  components: {
    // 注册子组件
    Home: {
      template: '<div>Welcome to the Home Page!</div>'
    },
    About: {
      template: '<div>Welcome to the About Page!</div>'
    }
  }
};
</script>

<style scoped>
/* 样式代码可以根据需要添加 */
</style>

解释说明

1. 动态组件：<component> 元素结合 :is 属性可以动态地切换不同的组件。
2. 按钮控制：通过点击按钮，改变 currentComponent 的值，从而实现组件的切换。
3. 注册组件：在 components 中注册了两个简单的组件 Home 和 About，每个组件都有自己的模板内容。
4. 数据绑定：使用 data 函数定义了一个响应式的数据属性 currentComponent，用于存储当前要显示的组件名称。