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

<template>
  <div>
    <h2>個(gè)人信息</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>通知設(shè)置</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>用戶設(shè)置</h1>
    <div>
      <button @click="currentComponent = 'PersonalInfo'">個(gè)人信息</button>
      <button @click="currentComponent = 'ChangePassword'">修改密碼</button>
      <button @click="currentComponent = 'NotificationSettings'">通知設(shè)置</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' // 默認(rèn)顯示的組件
    };
  }
};
</script>

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

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