1.子組件頁面結構

//NoticesMarquee 組件
<view v-for="(item, index) in tempList" :key="index" >
                        {{item.Title}}
</view>

2.父組件中使用

在父組件中引用子組件并傳遞值。

<template>
    <view>
           <!--使用子組件  -->
        <notices-marquee  :items="noticesList" ></notices-marquee>
    </view>
</template>

<script>
        import NoticesMarquee from '@/components/index/NoticesMarquee'
    export default {
        components:{
            NoticesMarquee
        },
        data() {
            return {
                noticesList: [{
                        Title: '4874545454554545454545454',
                        Id: 2
                    },
                    {
                        Title: '7888844844456454564564565465656',
                        Id: 1
                    },
                    {
                        Title: '78947898526665656+56+5+656',
                        Id: 3
                    },
                ],
            };
        }
    }
</script>
<style>

</style>

3.問題描述

3.1 問題概述:

現(xiàn)象為：在setTimeout()中修改值校镐，但是對 items這個數組并不起作用,即修改后的數組與原來一致，并沒有達到修改數組的效果，代碼如下:

export default {
        props: ['items'],
        methods: {
        showMarquee: function() {
                let _this = this;
                setTimeout(function() {
                    _this.items.push(_this.items[0]);
                    _this.items.shift()
                }, 500)
            },
        },
    }

3.1 解決辦法：

使用中間臨時數組(tempList(),在created()時就開始將值傳遞給臨時數組勋眯，防止出現(xiàn)延時情況，后續(xù)單獨操作臨時數組即可凿渊。

export default {
        props: ['items'],
        data() {
            return {
                tempList: []
            }
        },
        methods: {
            showMarquee: function() {
                let _this = this;
                setTimeout(function() {
                    _this.tempList.push(_this.tempList[0]);
                    _this.tempList.shift()
                }, 500)
            },
        },
        created() {
            this.tempList = this.items
        }
    }

點贊是最好的支持笼呆，關注是最大的鼓勵。親愛的朋友昧碉，很榮幸在簡書遇到您,若有疑問英染，歡迎探討~~~。