组件

<template>
    <div class="am-list-news-bd" style=" border-bottom: 1px solid #dedede;margin-bottom: 0.6em ">
      <el-row>


      <el-col :span="2">
         <img style="  40px; height: 40px;border-radius:15px" src="https://tvax2.sinaimg.cn/crop.0.0.512.512.180/006ZKmjSly8foxqbsvp5aj30e80e8wey.jpg" class="image">
        </el-col>
       <el-col :span="17">
        centos 7.5.1804, 把自带的 python2.7.5 删除了之后 yum 无法启动，该如何拯救
        </el-col>
        <el-col :span="3">
            <el-badge :value="3" class="item">
              
              </el-badge>
         </el-col>
      </el-row>
  
      <el-row style="margin-top:0.1em;margin-bottom: 0.6em ">
        <el-col :span="5">
          <small> linux</small>           
        </el-col>
        
        <el-col :span="5">
            <small> <strong>yuoboo</strong></small>            
        </el-col>
      
        <el-col :span="5">
            <small>3分钟前回复</small>            
        </el-col>
          
        <el-col :span="5">
            <small>2天前发表</small>            
        </el-col>
    </el-row>
               
    </div>
  </template>
  
  <script>
    export default {
      name: 'ArticleItem',
      props:['num','name','posttime','text'],
      data () {
        return {
          //msg: '敬请期待'
        }
      }
    }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    .am-list-news-bd {text-align:left;margin-top:0.8em;padding-bottom: 0.2em; }
  </style>

一个vue里

调用

<script>
import ArticleItem from './ArticleItem.vue'
  export default {

      components : {
        "ArticleItem":ArticleItem
      },

使用

  <el-row id="Homepan" :gutter="10">



    <el-col :xs="0" :sm="1" :md="2" :lg="2">.</el-col>
    <el-col :xs="24" :sm="22" :md="20" :lg="20">.

  <ArticleItem>11</ArticleItem>
  <ArticleItem>21</ArticleItem>