vue2 疑难问题 解析

1.[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: "state"

解析：vue2.0 禁止子组件修改父组件的数据

方案一：父组件每次传一个对象给子组件,对象之间是引用的

例如：giveData 为一个对象

父组件：

<child-com :msg="giveData"></child-com>

data(){
  return {
    giveData: {value: false}
  }
}

子组件：

// 传值
props: {
  giveData: {
    type: Object,
    default(){
      return {
        value: false
      }
    }
  }
},

// 监听
watch:{
  giveData: {
    handler: function (val, oldVal) {
      console.log(val);
    },
    deep: true
  }
},

// 获取
console.log(this.giveData.value); // false

方案二：只是不报错,mounted中转

例如：

<template>
  <div class="timeCell">
    <mt-switch v-model="value" @change="turn"></mt-switch>
  </div>
</template>

<script>
export default {
  props:{
    state:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return{
      value: false
    }
  },
  mounted(){
      this.value = this.state;
  },
  methods:{
    turn(){
      console.log(this.value);
    }
  }
}
</script>

<style lang="less" scoped>

</style>

2.[Vue warn]: Failed to mount component: template or render function not defined.

无法安装组件：未定义模板或渲染函数。

解析：webpack2 中不允许混用import和module.exports

方案：

将

改为

即可

3.使用 mint-ui 中的 Datetime Picker 报错

[Vue warn]: Error in mounted hook: "TypeError: this.currentValue.split is not a function"

TypeError: this.currentValue.split is not a function

解析：pickerStartValue 、pickerEndValue 格式有误

方案：

将

改为

即可

<template>
  <div>
    <!-- 头部 -->
    <mt-header title="重点时段管理"></mt-header>
    <!-- 时间设置 -->
    <div class="addTime">
      <ul>
        <li @click="openStartPicker">时段始于：{{pickerStartValue}}</li>
        <li @click="openEndPicker">时段止于：{{pickerEndValue}}</li>
      </ul>
      <mt-datetime-picker
        ref="pickerStart"
        type="time"
        v-model="pickerStartValue"
        @confirm="handleStartConfirm"
      ></mt-datetime-picker>
      <mt-datetime-picker
        ref="pickerEnd"
        type="time"
        v-model="pickerEndValue"
        @confirm="handleEndConfirm"
      ></mt-datetime-picker>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      pickerStartValue:'09:30',
      pickerEndValue:'17:30'
    }
  },
  methods: {
    openStartPicker() {
      // 开启开始日期选择器
      this.$refs.pickerStart.open();
    },
    openEndPicker() {
      // 开启结束日期选择器
      this.$refs.pickerEnd.open();
    },
    handleStartConfirm(){
      console.log('确定');
    },
    handleEndConfirm(){
      console.log('确定');
    }
  }
}
</script>

<style lang="less" scoped>
.addTime{
  ul{
    margin-top: 20px;
    li{
      display: block;
      margin: 0px auto;
      width: 80%;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ddd;
      text-indent: 1em;
    }
  }
}
</style>

.