页面中需要插入组件(新的代码页面)时,就会存在传参的问题。例如页面:
在此例子中,需要在传的参数包括“标题(党建动态)”、“布尔值(查看更多)”、“数组(内容。发现是个循环)”。
在母组件中代码如下:
<div class="moving">
<div class="col-33">
<trend title="党建动态" :hasMore="true" :list="list1"></trend>
</div>
<div class="col-33">
<trend title="基层动态" :hasMore="true" :list="list1" style="margin: 0 15px;"></trend>
</div>
<div class="col-33">
<trend title="干部工作" :hasMore="true" :list="list1"></trend>
</div>
</div>
在母组件中需要将list参数的值在script中定义出,代码如下:
list1: [
{
titled: '政协长葛市第十届委员会第十,...',
date: '[01-21]',
},
{
titled: '许昌市委副书记史根治一行莅...',
date: '[01-21]'
},
{
titled: '苗村镇传达贯彻全省安全生产...',
date: '[01-21]',
},
{
titled: '长市公安局局领导亲切慰问...',
date: '[01-21]'
},
{
titled: '长市质量技术监督局组织召...',
date: '[01-21]',
},
{
titled: '长社办大千20天,让辖区环...',
date: '[01-21]'
},
{
titled: '长社办大千20天,让辖区环...',
date: '[01-21]'
},
{
titled: '长社办大千20天,让辖区环...',
date: '[01-21]'
},
{
titled: '长社办大千20天,让辖区环...',
date: '[01-21]'
},
]
在子组件(新的代码页面)中需要进行接收参数,script代码如下:
<script>
export default {
props: {
title: '',
hasMore: true,
list: []
}
}
</script>
组件具体的样式就要在子组件中编写。
子组件的html代码如下:
<template>
<div class="box">
<div class="hd">
<a href="javascript:;" class="hasmore" v-if="hasMore == true">查看更多</a>
<div class="title">{{title}}</div>
</div>
<div class="bd">
<ul>
<li v-for="item in list">
<a href="javascript:;">
{{item.titled}}
<span class="date">{{item.date}}</span>
</a>
</li>
</ul>
</div>
</div>
</template>
此例子的重点是,字符串,数组,布尔值传参的书写。及for循环