# 子組件修改父組件的參數 ## 需要注意的是子組件不可以修改父組件的值，值能傳出一個自定義事件，父組件通過調用這個自定義事件后，然后再外部修改值 # 子組件代碼： ~~~ <template> <div> <h1>我是馬士兵教育,我接受到的父組件的值是：{{msbValue}} {{valueB}} {{valueC}}</h1> <button @click="add">按我加1</button> </div> </template> <script> export default { //羅列父組件傳進來的屬性值 props:{ msbValue:Number, valueB:Number, valueC:Number }, methods:{ add(){ this.$emit("add") //回應父對象事件 } } } </script> <style> </style> ~~~ # 父組件代碼： ## app.vue文件里 ~~~ <template> <div > <MashiBing @add="sumNum" :msb-value="a" :value-b="b" :value-c="c" ></MashiBing> </div> </template> <script> //引入組件 import MashiBing from "@/components/MashiBing.vue"; export default { components:{ MashiBing }, data(){ return{ a:100, b:200, c:300 } }, methods:{ sumNum(){ this.a++ } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> ~~~ # $emit ## $emit 方法是vue封裝的，用來向父組件返回對應的自定義事件，父組件通過再子組件身上，設置對應的自定義事件后設置事件名稱。