在主干js中的视图中嵌套视图

import React from 'react';

function MainView() {
  return (
    <div>
     <HeaderView />
     <ContentView />
      <FooterView />
    </div>
  );
}

function HeaderView() {
  return (
    <div>
      <h1>Header</h1>
    </div>
  );
}

function ContentView() {
  return (
    <div>
      <p>Content</p>
    </div>
  );
}

function FooterView() {
  return (
    <div>
      <p>Footer</p>
    </div>
  );
}

export default MainView;

  <div>
   <HeaderView />
   <ContentView />
    <FooterView />
  </div>
</template><script>
import HeaderView from './HeaderView.vue';
import ContentView from './ContentView.vue';
import FooterView from './FooterView.vue';

export default {
  components: {
    HeaderView,
    ContentView,
    FooterView
  }
};
</script>

<!-- main-view.component.html -->
<div>
  <app-header-view></app-header-view>
  <app-content-view></app-content-view>
  <app-footer-view></app-footer-view>
</div>

// main-view.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-main-view',
  templateUrl: './main-view.component.html',
  styleUrls: ['./main-view.component.css']
})
export class MainViewComponent {
  // ...
}