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

推荐是最好的支持，关注是最大的鼓励。亲爱的朋友，很荣幸在园子里遇到您,希望能与您一起学习~~~。