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