父组件分发数据到子组件中，如果分发的数据是一个数组，我们使用v-for列表渲染指令进数据的分发

1、创建子组件

let panelTpl = { template:'#panel' }

2、根组件申明

let vm = new Vue({
  el: '#app',
  data: {
    list: [{
      title: '习近平总书记到过的红色圣地之山东篇',
      des: '山东是革命老区，底蕴深厚的传统文化与红色基因叠加，造就了这方热土奋勇向前的强大力量。',
      addtime: '2021-05-26 08:22:16'
    }, {
      title: '百集文献纪录片 《山河岁月》',
      des: '由中央广播电视总台出品的百集文献纪录片《山河岁月》5月23日在央视综合频道和纪录频道播出第十二集。第十二集《无言的丰碑》讲述了大革命失败后中国共产党在隐秘战线同敌人斗争的历史。',
      addtime: '2021-05-26 08:22:16'
    }, {
      title: '大湾区 大未来 奋斗百年路 启航新征程',
      des: '历史因铭记而永恒，精神因传承而不灭。这一个个红色地标，一座座英雄丰碑，是绵延不绝的记忆，更是一笔传之久远的宝贵财富，他们可歌可泣的事迹，震撼了一代代人的心灵！',
      addtime: '2021-05-26 08:22:16'
    }]
  },
  components: {
    panelTpl
  }
})

3、视图层子组件：

<template id="panel">
  <div class="panel">
    <div class="panel-header">
      <slot name="title">此处显示标题</slot>
    </div>
    <div class="panel-body">
      <slot name="des">此处显示文章</slot>
    </div>
    <div class="panel-bottom">
      <slot name="addtime">此处显示时间</slot>
    </div>
  </div>
</template>

4、视图层根组件：

<div id="app">
  <panel-tpl v-for="(item,index) in list">
    <h1 slot="title">{{item.title}}</h1>
    <p slot="des">{{item.des}}</p>
    <p slot="addtime">{{item.addtime}}</p>
  </panel-tpl>
</div>

代码演示：

可以看到标题过长，所以我们可以添加过滤器

1、根组件：

let vm = new Vue({
  el: '#app',
  data: {
    list: [{
      title: '习近平总书记到过的红色圣地之山东篇',
      des: '山东是革命老区，底蕴深厚的传统文化与红色基因叠加，造就了这方热土奋勇向前的强大力量。',
      addtime: '2021-05-26 08:22:16'
    }, {
      title: '百集文献纪录片 《山河岁月》',
      des: '由中央广播电视总台出品的百集文献纪录片《山河岁月》5月23日在央视综合频道和纪录频道播出第十二集。第十二集《无言的丰碑》讲述了大革命失败后中国共产党在隐秘战线同敌人斗争的历史。',
      addtime: '2021-05-26 08:22:16'
    }, {
      title: '大湾区 大未来 奋斗百年路 启航新征程',
      des: '历史因铭记而永恒，精神因传承而不灭。这一个个红色地标，一座座英雄丰碑，是绵延不绝的记忆，更是一笔传之久远的宝贵财富，他们可歌可泣的事迹，震撼了一代代人的心灵！',
      addtime: '2021-05-26 08:22:16'
    }]
  },
  // 过滤器 
  filters: {
    restrictedText: function (value, maxWidth) {
      return value.substring(0, maxWidth) + "...";
    }
  },
  components: {
    panelTpl
  }
})

2、视图层：

<div id="app">
  <panel-tpl v-for="(item,index) in list">
    <h1 slot="title">{{item.title | restrictedText(10)}}</h1>
    <p slot="des">{{item.des}}</p>
    <p slot="addtime">{{item.addtime}}</p>
  </panel-tpl>
</div>

代码演示：