javascript - vue encapsulates the time control el-date-picker of element-ui and reports an error (v-model component encapsulation)

Question

The following error occurred when encapsulating the timepicker of element-ui?

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value" 
(found in <ElInput>)
warn @ vue.js?1a2a:564
(anonymous) @ vue.js?1a2a:2699
reactiveSetter @ vue.js?1a2a:864
updateChildComponent @ vue.js?d304:2468
prepatch @ vue.js?d304:3343
patchVnode @ vue.js?d304:5136
updateChildren @ vue.js?d304:5064
patchVnode @ vue.js?d304:5147
updateChildren @ vue.js?d304:5064
patchVnode @ vue.js?d304:5147
updateChildren @ vue.js?d304:5064
patchVnode @ vue.js?d304:5147
updateChildren @ vue.js?d304:5064
patchVnode @ vue.js?d304:5147
updateChildren @ vue.js?d304:5064
patchVnode @ vue.js?d304:5147
updateChildren @ vue.js?d304:5064
patchVnode @ vue.js?d304:5147
patch @ vue.js?d304:5271
Vue._update @ vue.js?d304:2303
updateComponent @ vue.js?d304:2419
get @ vue.js?d304:2756
run @ vue.js?d304:2826
flushSchedulerQueue @ vue.js?d304:2595
(anonymous) @ vue.js?d304:658
nextTickHandler @ vue.js?d304:605
vue.js?1a2a:564 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "readonly" 
(found in <ElInput>)

The encapsulation code is as follows:

<template>
  <p class="block">
    <span class="demonstration">时间</span>
    <el-date-picker
      v-model="date"
      type="datetimerange"
      placeholder="Select time range">
    </el-date-picker>
  </p>
</template>

<script>
  export default {
    name:"timepicker",
    data(){
        return{
            date:this.dateValue
        }
    },
    props: {
      dateValue: Array
    },
    computed:{
    }
  }
</script>

Use as follows:

<timepicker :date-value="date"></timepicker>

When you click the time control to select the time, an error will be reported. If you don't click, it will be fine.
Please let me know how to encapsulate components with v-model.

Answer 1

This kind of error exists in vue2.0. It means that you have modified the value passed from the parent component and you have used data instead, so it is not a problem here. Is it a problem when it is passed to elementUI? If you don't assign dateValue to date, what about using the data defined by the current page? Will this problem still occur?