报错截图:
原因:
在 Vue.js 中,直接修改一个来自父组件的 prop(属性)是不被推荐的,因为这样做会违反组件间的单向数据流原则。当你尝试直接修改一个 prop 时,如果父组件重新渲染(例如,由于数据变化或响应式依赖更新),这个 prop 的值将会被父组件中的原始值覆盖,从而导致你的修改丢失。
修改代码:
父组件
父组件:
<BankAttempt :name="BankSearchName"
:propDialogVisible="BankDialogVisible"
@updateDialogVisible="updateDialogVisible">
</BankAttempt>
import BankAttempt from "xxx"
export default {
name:'parentComponent',
components: {
// 子组件
BankAttempt
},
data(){
return{
BankDialogVisible: false
}
}
methods:{
updateDialogVisible(newVal) {
this.BankDialogVisible = newVal;
},
}
其中:BankDialogVisible 是父组件传给子组件的值
子组件:
propDialogVisible:是接收到父组件传的值
由于props变量不推荐直接修改,所以我这里申明了一个变量dialogVisible
通过watch监听将propDialogVisible 赋给dialogVisible
同时,子组件dialogVisible发生变化通过 this.$emit('updateDialogVisible',this.dialogVisible)
通知父组件
父组件接收:
@updateDialogVisible="updateDialogVisible"
updateDialogVisible(newVal) {
this.BankDialogVisible = newVal;
},
就进行双向绑定了
export default {
name: 'BankAttempt',
data() {
return{
dialogVisible: false
}
}
props: {
propDialogVisible: {
type: Boolean,
default: false
},
},
watch: {
propDialogVisible: {
handler(newVal, oldVal) {
this.dialogVisible = newVal;
if (newVal && this.tableData.length == 0){
this.pageQueryBankData()
}
},
deep: true
},
},
// 关闭弹窗
handleCancel() {
this.selectedRow = {}
this.dialogVisible = false;
this.$emit('updateDialogVisible',this.dialogVisible)
},