參數傳值，for循環，數組，對象。

頁面中須要插入組件（新的代碼頁面）時，就會存在傳參的問題。例如頁面：

在此例子中，須要在傳的參數包括「標題（黨建動態）」、「布爾值（查看更多）」、「數組（內容。發現是個循環）」。

在母組件中代碼以下：

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