Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
阿新 • • 發佈:2018-12-10
父元件 <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>