如何在代码中绑定嵌套对象或master-detail-binding？

  <div>
    <div v-for="(item, index) in order.items" :key="index">
      <p>{{ item.name }}</p>
      <p>{{ item.price }}</p>
      <p>{{ item.quantity }}</p>
    </div>
  </div>
</template><script>
export default {
  data() {
    return {
      order: {
        items: [
          { name: '商品1', price: 100, quantity: 2 },
          { name: '商品2', price: 200, quantity: 1 },
        ],
      },
    };
  },
};
</script>

<!-- master.component.html -->
<div>
  <ul>
    <li *ngFor="let item of items" (click)="onSelect(item)">
      {{ item.name }}
    </li>
  </ul>
</div>

// master.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-master',
  templateUrl: './master.component.html',
})
export class MasterComponent {
  items = [
    { id: 1, name: '商品1' },
    { id: 2, name: '商品2' },
  ];

  onSelect(item: any) {
    this.selectedItem = item;
  }
}

<!-- detail.component.html -->
<div>
  <p>{{ item.name }}</p>
</div>

// detail.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
})
export class DetailComponent {
  @Input() item: any;
}

<!-- app.component.html -->
<div>
  <app-master (selectedItem)="onSelected($event)"></app-master>
  <app-detail [item]="selectedItem"></app-detail>
</div>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  selectedItem: any;

  onSelected(item: any) {
    this.selectedItem = item;
  }
}