vue2，新闻渲染效果

做一个新闻渲染的效果，最后呈现的效果

 

 

 数据放入父组件中，公共样式放入子组件中

父组件中引入子组件，放入数组，然后进行样式渲染

<template>
<div class="zong">
  <news :list="arr" :title="title"></news>
</div>
</template>

<script>
import news from "@/components/news";
export default {
  name: "15-新闻组件（）news",
  components : {
    news
  },
  data() {
    return {
      title:`本周热门搜索`,
      arr: [
        {id : 1,name : `区块链`,data : `96`,},
        {id : 2,name : `数据挖掘`,data : `91`},
        {id : 3,name : `无人机`,data : `87`},
        {id : 4,name : `生命科学`,data : `72`},
        {id : 5,name : `传感器`,data : `60`},
      ],
    }
  },
}
</script>

<style scoped>
.zong {
  width: 300px;
  height: 600px;
  border: 1px solid #0ac2f3;
  background-color: #f4f6fa;
  padding-top: 10px;
}
</style>

子组件中创建号样式，进行数组和标题接收

<template>
<div>
<!--  组件整体背景-->
  <div class="background">
<!--    组件头部-->
    <table></table>
<!--    组件身体-->
    <tr></tr>
  </div>
</div>
</template>

<script>
export default {
  name: "news",
  props : {
    list : {
      type : Array
    },
    title : String
  }
}
</script>

<style scoped>
.background {
  margin-left: 50px;
  width: 200px;
  border-radius: 5px;
  overflow: hidden;
  background-color: #ffffff;
  margin-bottom: 20px;
}
</style>

 

进行插槽使用，把数据渲染到页面中，使用子组件写出来固定的页面，父组件把数据渲染上去，然后写出来不固定的区域

子组件中插入插槽，和样式

<!--  组件整体背景-->
  <div class="background">
<!--    组件头部-->
    <table></table>
<!--    组件身体,使用v-for进行组件渲染-->
    <tr v-for="i in list" :key="i.id">
<!--      进行创建一个div更好让内容进行分开-->
      <div class="TD">
<!--        声明左右插槽，等一下放入内容,作用域插槽把参数传给父组件，父组件等一下可以进行页面渲染-->
        <div class="left"><slot name="left" :chuan="i"></slot></div>
        <div class="right"><slot name="right" :chuan="i"></slot></div>
      </div>
    </tr>
  </div>

添加lleft和right样式

.TD {
  width: 200px;
  line-height: 40px;
  font-size: 12px;
  border-bottom: 1px solid  #f3f3f3;
}
tr {
  height: 40px;
}
.left {
  float: left;
  margin-left: 10px;
}
.right {
  float: right;
  margin-right: 10px;
}

父组件进行接收插槽传参，渲染到页面中

  <news :list="arr" :title="title">
<!--    父组件进行作用参数接收，然后渲染数据到子组件固定的页面中-->
    <template #left="shou">{{shou.chuan.name}}</template>
    <template #right={chuan}>{{chuan.data}}</template>
  </news>

子组件进行头部传值，父组件接收并且渲染到子组件中

    <table>
      <slot name="table" :title="title"></slot>
    </table>

table {
  width: 200px;
  height: 30px;
  background-image: linear-gradient(90deg, #1777ff, #69c6fc);
  line-height: 30px;
  font-size: 14px;
  color: #f4f6fa;
  padding-left: 12px;
  font-weight: 700;
}

父组件进行接收，渲染到页面

<div class="zong">
  <news :list="arr" :title="title">
    <template #table="{title}">{{title}}</template>
    <!--    父组件进行作用参数接收，然后渲染数据到子组件固定的页面中-->
    <template #left="shou">{{shou.chuan.name}}</template>
    <template #right={chuan}>{{chuan.data}}</template>
  </news>
</div>

第二个样式

和第一个样式，不过我们传入新的数组，和新的标题，新的标题有两个部分，我们需要给标题添加一个新的插槽

父组件进行数组添加，传值和页面渲染

  data() {
    return {
      title:`本周热门搜索`,
      arr: [
        {id : 1,name : `区块链`,data : `96`,},
        {id : 2,name : `数据挖掘`,data : `91`},
        {id : 3,name : `无人机`,data : `87`},
        {id : 4,name : `生命科学`,data : `72`},
        {id : 5,name : `传感器`,data : `60`},
      ],
      // 传入第二批数组
      Title : `感兴趣的电影`,
      huan : `换一批`,
      Arr: [
        {id : 1,name : `无人区`,data : `10`,information : `导演`},
        {id : 2,name : `疯狂的赛车`,data : `20`,information : `导演`},
        {id : 3,name : `战狼`,data : `30`,information : `导演`},
        {id : 4,name : `上海堡垒`,data : `400`,information : `主演`},
      ],

 

<!--  第二个框架样式,引入数组,-->
  <news :list="Arr" :Title="Title" :huan="huan">
    <template #table="{Title}">{{Title}}</template>
    <template #huan="{huan}">{{huan}} 🌀</template>
    <template #left="{chuan}">
      <td style="height: 40px;">
        <div style="height: 12px; line-height: 12px;margin: 6px 0px">《{{chuan.name}}》</div>
        <div style="height: 12px; line-height: 12px;margin-top: 4px;color:#9b9b9b; transform:scale(0.8)">{{chuan.information}}</div>
      </td>
    </template>
    <template #right="{chuan}"><td>价格{{chuan.data}}</td></template>
  </news>

子组件进行接收，并且传递给父组件

<!--    组件头部-->
    <table>
      <slot name="table" :title="title" :Title="Title"></slot>
<!--      换一批，创建一个新的插槽-->
      <span class="huan"><slot name="huan" :huan="huan"></slot></span>
    </table>

第三个样式

没有头部的话，不展示，有的话展示

在子组件中添加if判断事件

<!--    组件头部-->
    <table v-if="$scopedSlots.table || $scopedSlots.huan">
<!--      if判断有没有这个作用域插槽，如果没有的话，不会展示头部标签-->
      <slot name="table" :title="title" :Title="Title" ></slot>
<!--      换一批，创建一个新的插槽-->
      <span class="huan"><slot name="huan" :huan="huan"></slot></span>
    </table>

父组件动态渲染样式

  <news :list="add">
    <template #left="shou">
      <td><span>{{shou.chuan.img}}</span>{{shou.chuan.name}}</td>
    </template>
    <template #right="{chuan}">
      <td>{{chuan.data}}</td>
    </template>
  </news>