父组件分发数据到子组件中,如果分发的数据是一个数组,我们使用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>

代码演示:

202105261622010848112250

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

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>

代码演示:

202105261622010961206235