Element-ui中Container布局容器的坑

今天在用Element-ui的Container布局的时候，我把头部和底部和主要内容分成了三个组件，在APP.vue中调用在一起。但是发现看不到内容，后来发现原来是全部变成水平排列了。

这是我一开始写的代码

APP.vue

<template>
  <div id="app">
    <el-container>
      <app-header></app-header>  //顶部导航组件
      <index></index>    //主要内容组件
      <app-footer></app-footer>    //底部组件
    </el-container>
  </div>
</template>

标题header.vue

<template>
  <el-header class="header_container" height="64">
    <el-row>
      ...
    </el-row>
  </el-header>
</template>

后来查了下文档发现

但是按我的想法来说没有问题呀，子元素中有el-header和el-footer了，应该默认为vertical，垂直布局才对的。
后来百度之后才知道，当由几个组件封装到一起的时候是没有用的，所以要自己给el-container加上direction属性为horizontal

<el-container direction="vertical">