如何构建一个包含多个部分的视图，这些部分包含所需的变量？

<template>
  <div class="user-info">
    <h2>{{ user.name }}</h2>
    <p>Email: {{ user.email }}</p>
  </div>
</template>

<script>
export default {
  props: {
    user: Object
  }
}
</script>

<style scoped>
.user-info {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
</style>

<template>
  <div class="order-list">
    <h2>Orders</h2>
    <ul>
      <li v-for="order in orders" :key="order.id">
        {{ order.product }} - ${{ order.amount }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    orders: Array
  }
}
</script>

<style scoped>
.order-list {
  border: 1px solid #ccc;
  padding: 10px;
}
</style>

<template>
  <div id="app">
    <UserInfo :user="currentUser" />
    <OrderList :orders="currentOrders" />
  </div>
</template>

<script>
import UserInfo from './components/UserInfo.vue';
import OrderList from './components/OrderList.vue';

export default {
  components: {
    UserInfo,
    OrderList
  },
  data() {
    return {
      currentUser: {
        name: 'John Doe',
        email: 'john.doe@example.com'
      },
      currentOrders: [
        { id: 1, product: 'Laptop', amount: 1200 },
        { id: 2, product: 'Smartphone', amount: 800 }
      ]
    };
  }
}
</script>