参数传值，for循环，数组，对象。

2019独角兽企业重金招聘Python工程师标准>>>

页面中需要插入组件（新的代码页面）时，就会存在传参的问题。例如页面：

在此例子中，需要在传的参数包括“标题（党建动态）”、“布尔值（查看更多）”、“数组（内容。发现是个循环）”。

在母组件中代码如下：

<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循环

转载于:https://my.oschina.net/u/3949469/blog/3016286