Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
程序员文章站
2024-01-25 19:58:04
...
父组件
<popup :show="showpopup" @closepop="closepop"></popup>
子组件
<template>
<div :class="show?'container show':'hide'" @click="close">
</div>
</template>
//这是一个弹窗
<script>
export default {
name: "popup",
props:{
show:true,
},
methods:{
close(){
this.show = false;
this.$emit('closepop')
}
}
}
</script>
以上是源码,当我点击弹窗的时候出现了以下报错信息
大概意思是:通过props传递给子组件的show,不能在子组件内部修改props中的show值。
===============
以下是修改后的代码:
父组件
<popup :show="showpopup" @closepop="closepop"></popup>
子组件
<template>
<div :class="show?'container show':'hide'" @click="close">
</div>
</template>
//这是一个弹窗
<script>
export default {
name: "popup",
props:{
show:true,
},
methods:{
close(){
//this.show = false; //这行去掉 不能直接改变props中参数的值
this.$emit('closepop'); //通知父组件改变。
}
}
}
</script>