强迫症讨厌的vue警告,[Vue warn]Prop being mutated: “visible“
写VUE组件的时候,用到Modal经常会有这个警告,强迫症看的不舒服:[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 bas
·
- 写VUE组件的时候,用到Modal经常会有这个警告,强迫症看的不舒服:
[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: "visible"
- 原因:关闭的时候,调用父组件的方法,然后去改变visible值,再改变子组件的可见,产生了警告
1.最新解决方案:2021-08-18(推荐)
1.1页面上使用
父组件(页面)中:
组件使用
<edit-department :visible.sync="visible" />
组件引入
import EditDepartment from '@/components/modal/department/EditDepartment '
组件注册
components: { EditDepartment }
弹出组件:
方法中:使用子组件的显示方法
this.visible = "true"
组件
<template>
<!-- 重点在这里,visible改用value绑定了,不再是原来的v-model-->
<Modal width="600" :value="visible" title="弹出框" @on-visible-change="visibleChange">
<Form ref="formValidate" class="form" :model="form" :label-width="80">
<FormItem label="名称">
<Input v-model="form.name" />
</FormItem>
</Form>
<div slot="footer">
<Button @click="close">取消</Button>
<Button type="primary" @click="submit">确定</Button>
</div>
</Modal>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false,
},
},
data() {
return {
form:{
name: '',
}
}
},
methods: {
// 模态框状态发生改变(这个一定要有)
visibleChange(val) {
if (!val) {
this.close()
}
},
close() {
this.$emit('update:visible', false)
},
clear() {
Object.keys(this.form).forEach((x) => (this.form[x] = null))
this.handleReset()
},
// 验证与清除验证
handleSubmit() {
let bool
this.$refs.formValidate.validate((valid) => {
if (valid) {
bool = true
} else {
this.$Message.error('请输入完整信息!')
bool = false
}
})
return bool
},
handleReset() {
this.$refs.formValidate.resetFields()
},
},
}
</script>
旧版解决方案:2021-03-08
现在找到一个解决方案,把visible值的改变,全都放进子组件里通过子组件来改变
组件Modal,使用父组件调用子组件,去改变visible
父组件(或者是页面)中:
组件使用:(注意带上ref,方便调用组件里的方法)
<del-department ref="delDepartment" @on-ok="clear => delDepartment(clear)"></del-department>
组件引入
import DelDepartment from '@/components/modal/department/DelDepartment'
组件注册
components: { DelDepartment }
弹出组件:
方法中:使用子组件的显示方法
this.$refs.delDepartment.open()
子组件:
<template>
<div class="modal-botton">
<Modal class="delete-modal" class-name="vertical-center-modal" v-model="visible">
<!-- 右上角关闭位置,自定义 -->
<!-- <p slot="close"></p> -->
<!-- 头部自定义 -->
<p style="color: #fff" slot="header"></p>
<!-- 内容自定义 -->
<h3 style="text-align: center; margin-top: 20px">确认删除,删除后无法恢复</h3>
<div class="delete-footer" slot="footer">
<Button @click="close" style="background: #d7d7d7; color: white">取消</Button>
<Button @click="isOK" type="info" style="background: #5f84ff; color: white; margin-left: 100px" ghost>确认</Button>
</div>
</Modal>
</div>
</template>
<script>
export default {
data() {
return {
visible: false,
}
},
methods: {
isOK() {//调用父组件的方法
this.$emit('on-ok', this.close)
},
close() {
this.visible = false
},
open() {
this.visible = true
},
},
}
</script>
<style lang="less">
.modal-botton {
display: inline-block;
.button {
cursor: pointer;
}
}
.delete-modal {
.ivu-modal-header {
background-color: #1562be;
}
.delete-footer {
display: flex;
justify-content: center;
}
.vertical-center-modal {
top: 200px;
}
}
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)