Vue3的动态组件使用场景与示例

src/
|-- components/
|   |-- PersonalInfo.vue
|   |-- ChangePassword.vue
|   |-- NotificationSettings.vue
|-- App.vue
|-- main.js

<template>
  <div>
    <h2>个人信息</h2>
    <form>
      <label for="name">姓名:</label>
      <input type="text" id="name" v-model="name" />
      <label for="email">邮箱:</label>
      <input type="email" id="email" v-model="email" />
      <button type="submit">保存</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      email: ''
    };
  }
};
</script>

<template>
  <div>
    <h2>修改密码</h2>
    <form>
      <label for="old-password">旧密码:</label>
      <input type="password" id="old-password" v-model="oldPassword" />
      <label for="new-password">新密码:</label>
      <input type="password" id="new-password" v-model="newPassword" />
      <button type="submit">修改密码</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      oldPassword: '',
      newPassword: ''
    };
  }
};
</script>

<template>
  <div>
    <h2>通知设置</h2>
    <label>
      <input type="checkbox" v-model="emailNotifications" />
      邮件通知
    </label>
    <label>
      <input type="checkbox" v-model="smsNotifications" />
      短信通知
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emailNotifications: false,
      smsNotifications: false
    };
  }
};
</script>

<template>
  <div>
    <h1>用户设置</h1>
    <div>
      <button @click="currentComponent = 'PersonalInfo'">个人信息</button>
      <button @click="currentComponent = 'ChangePassword'">修改密码</button>
      <button @click="currentComponent = 'NotificationSettings'">通知设置</button>
    </div>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import PersonalInfo from './components/PersonalInfo.vue';
import ChangePassword from './components/ChangePassword.vue';
import NotificationSettings from './components/NotificationSettings.vue';

export default {
  components: {
    PersonalInfo,
    ChangePassword,
    NotificationSettings
  },
  data() {
    return {
      currentComponent: 'PersonalInfo' // 默认显示的组件
    };
  }
};
</script>

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');