[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent

在这里插入图片描述
上面这个警告是父组件通过props给子组件传值,子组件直接使用该值造成的,深入了解请浏览vue官方文档.

解决:在子组件data中定义新变量接收props传递过来的值,警告没了

例:注意看子组件中的created生命周期的this.time = this.endTime

//父组件
<template>
	<div>
		<count-down :endTime="couponEndTime" @countdownEnd="countdownEnd"></count-down>
	</div>
</template>
<script>
	import countDown from '../components/countDown'
	export default {
		data(){
			return{
				couponEndTime:'2020-01-17 11:10:30'
			}
		},
		components:{
			countDown
		},
		methods:{
			countdownEnd(){
				alert('时间到了')
			}
		}
	}
</script>
//子组件
<!--倒计时(原生js)-->
<template>
    <div class="container">
        <div class="countDown-box">
            <div class="timeItem">{{oDay}}</div>
            <span>:</span>
            <div class="timeItem">{{oHour}}</div>
            <span>:</span>
            <div class="timeItem">{{oMinute}}</div>
            <span>:</span>
            <div class="timeItem">{{oSecond}}</div>
        </div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
                timer:'',
                oDay:0,
                oHour:0,
                oMinute:0,
                oSecond:0,
                time:''
            }
        },
        props: {
            endTime: {
                type: String,
            }
        },
        created(){
            this.time = this.endTime
            if (this.time.indexOf(" ") == -1){
                this.time = this.time + " " + "23:59:59"
            }
            this.timer = setInterval(() => {
                this.getTime();
            }, 1000)
        },
        destroyed(){
            clearInterval(this.timer)
        },
        methods: {
             getTime() {
                this.time = new Date(this.time);
                let currentTime = new Date();
                let differTime = (this.time - currentTime) / 1000;//得到相差总时间(秒)
                let day = Math.floor(differTime / (60 * 60 * 24)); //剩余天数
                day = day >= 10 ? day : '0' + day;
                let hour = Math.floor(differTime / (60 * 60) % 24); //剩余小时
                hour = hour >= 10 ? hour : '0' + hour;
                let minute = Math.floor(differTime / 60 % 60); //剩余分钟
                minute = minute >= 10 ? minute : '0' + minute;
                let second = Math.floor(differTime % 60); //剩余秒
                second = second >= 10 ? second : '0' + second;
                this.oDay = day;
                this.oHour = hour;
                this.oMinute = minute;
                this.oSecond   = second;
                if (parseInt(day) <= 0 && parseInt(hour) <= 0 && parseInt(minute) <= 0 && parseInt(second) <= 0) {
                    clearInterval(this.timer)
                    this.$emit('countdownEnd')
                }
            }
        }
    }
</script>

留言:该篇博文处理了警告问题,同时也是原生js写倒计时的一个例子

发布了31 篇原创文章 · 获赞 5 · 访问量 781

猜你喜欢

转载自blog.csdn.net/weixin_45899022/article/details/104015957