vue封装饿了吗element-ui的时间控件el-date-picker报错(v-model组件封装)

Question

封装饿了吗element-ui的timepicker时候出现如下错误：

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

封装代码如下：

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

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

使用如下：

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

当点击时间控件选择时间的时候，就会报错，不点击没问题。
求大神帮看下如何封装带v-model的组件。

Answer 1

这种错误是vue2.0里有的，意思是你修改了父组件传过来得值，你已经使用data代替了，所以不是这个地方出的问题，难道是传到elementUI时出的问题？你不给date赋值dateValue，用当前页面自己定义的数据呢？还会有这个问题吗？

Answer 2

# 2个方法

第一个 ：

// 父组件
<dialog-apply :visible.sync="dialogApplyVisible" />

// 子组件
<el-dialog
      :visible.sync="visible"
      title="申请"
      :before-close="onClose"
>

onClose() {
  this.$emit('update:visible', false)
}

第二个 ：

// 父组件
<dialog-apply :visible.sync="dialogApplyVisible" @close='dialogApplyVisible = false' />

// 子组件
<el-dialog
      :visible.sync="visible"
      title="申请"
      :before-close="onClose"
>

onClose() {

   this.$emit('close')
}

---

这2个方法 ，:before-close 是关键 ；

Answer 3

您这个element ui时间控件问题解决了吗？我遇到了和你一样的问题。

Answer 4

我也出现了同样的情况，是我删除了node_module 重新使用 cnpm install 安装导致的，
使用npm install 安装后，没有出现上述问题。

排查了2个小时，还以为是vue 版本，和 element-ui版本的问题。