解決uni-app props 傳遞數組修改後不能使用問題

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 問題概述:

現象爲：在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()時就開始將值傳遞給臨時數組，防止出現延時狀況，後續單獨操做臨時數組便可。

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 } }

 

推薦是最好的支持，關注是最大的鼓勵。親愛的朋友，很榮幸在園子裏遇到您,但願能與您一塊兒學習~~~。