做一个新闻渲染的效果，最后呈现的效果
数据放入父组件中，公共样式放入子组件中
父组件中引入子组件，放入数组，然后进行样式渲染
<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}}
标签：chuan,name,效果,渲染,vue2,组件,data,id
From： https://www.cnblogs.com/hgng/p/17041473.html