今天在用Element-ui的Container布局的時(shí)候，我把頭部和底部和主要內(nèi)容分成了三個(gè)組件，在APP.vue中調(diào)用在一起。但是發(fā)現(xiàn)看不到內(nèi)容，后來發(fā)現(xiàn)原來是全部變成水平排列了。

這是我一開始寫的代碼

APP.vue

<template>
  <div id="app">
    <el-container>
      <app-header></app-header>  //頂部導(dǎo)航組件
      <index></index>    //主要內(nèi)容組件
      <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>

后來查了下文檔發(fā)現(xiàn)

官方文檔

但是按我的想法來說沒有問題呀，子元素中有el-header和el-footer了，應(yīng)該默認(rèn)為vertical，垂直布局才對的。
后來百度之后才知道，當(dāng)由幾個(gè)組件封裝到一起的時(shí)候是沒有用的，所以要自己給el-container加上direction屬性為horizontal

<el-container direction="vertical">

然后問題就解決了，變成了垂直布局。