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