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