# 子组件修改父组件的参数 ## 需要注意的是子组件不可以修改父组件的值，值能传出一个自定义事件，父组件通过调用这个自定义事件后，然后再外部修改值 # 子组件代码： ~~~ <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封装的，用来向父组件返回对应的自定义事件，父组件通过再子组件身上，设置对应的自定义事件后设置事件名称。