因为vue这是一个单项数据流，因此无法直接在子组件中修改父组件中的数据，vue为防止项目过于复杂，提倡单项数据流，使数据流难以理解。引用Vue官网：父系 prop 的更新会向下流动到子组件中，但是反过来则不行。这将防止从子组件意外改变父和组件的状态，使您的应用数据流难以理解。因此，在项目开发过程中，我们总是通过子组件触发父组件的方法，通过父组件的方法改变父组件的数据。

一、props传递方法

通过props通过这种方式，将父组件的方法传递到子组件中props在当前组件的实例中，接收可以直接触发父组件的方法，从而实现子组件对父组件值的更改。同事也可以以参数的形式将子组件的数据发送给父组件。

由于代码不多，暂且全部显示，只需关注相关事件即可

//父组件，设置更改自己数据的方法，将该方法传递给子组件 <template>   <div class="home">     <h1>我是父组件</h1>     <HelloWorld :msg="msg" :changeMsg="changeMsg"/>   </div> </template>  <script> import HelloWorld from '@/components/HelloWorld.vue'  export default {   name: 'Home',   components: {     HelloWorld   },   methods:{     changeMsg(text,num){       console.log(text,num);       this.msg=this.msg 1     }   },   data(){     return{       msg:1     }   } } </script>    //子组件，通过接收父组件传输的方法props接收方法和数据，可以直接获得和触发组件实例 <template>   <div class="hello">     <h1>我是子组件<button @click="changeFatherData">点击我更改父组件数据</button></h1>     <h1>父组件数据：{     
      {msg}}</h1>        </div> </template>  <script> export default {   name: 'HelloWorld',   props: {     msg: Number,     changeMsg:Function   },   data(){     return{       text:"我是子组件数据，我想发送给父组件",       num:12     }   },   methods:{     changeFatherData(){       this.changeMsg(this.text,this.num)     }   }, } </script>  <style scoped lang="scss">  </style>  

二、通过this.$emit实现触发父组件的方法

在父组件中定制一种方法，然后通过子组件传递给子组件this.$emit直接触发父子组件中的数据，实现父子组件的通信。子组件触发事件，父子组件监控事件。

//父组件，将定义的方法传递给子元素 <template>   <div class="home">     <h1>我是父组件</h1>     <HelloWorld :msg="msg" @changeMsg="changeMsg"/>   </div> </template>  <script> import HelloWorld from '@/components/HelloWorld.vue'  export default {   name: 'Home',   components: {     HelloWorld   },   methods:{     changeMsg(text,num){       console.log(text,num);       this.msg=this.msg 1     }   },   data(){     return{       msg:1     }   } } </script>   //子组件，通过this.$emit触发父组件方法，更改父组件数据，同时，数据传值同时进行 <template>   <div class="hello">     <h1>我是子组件<button @click="changeFatherData">点击我更改父组件数据</button></h1>     <h1>父组件数据：{     
      {msg}}</h1>        </div> </template>  <script> export default {   name: 'HelloWorld',   props: {     msg: Number,   },   data(){     return{       text:"我是子组件数据，我想发送给父组件",       num:12     }   },   methods:{     changeFatherData(){       this.$emit('changeMsg',this.text,this.num)     }   }, } </script>  <style scoped lang="scss">  </style> 

三、子组件通过this.$parent直接触发父组件（代码简洁，推荐使用）

子组件直接触发父组件事件，无需方法传输、接收和事件定义。

//父组件，声明所需的方法 <template>   <div class="home">     <h1>我是父组件</h1>     <HelloWorld :msg="msg"/>   </div> </template>  <script> import HelloWorld from '@/components/HelloWorld.vue'  export default {   name: 'Home',   components: {     HelloWorld   },   methods:{     changeMsg(text,num){       console.log(text,num);       this.msg=this.msg 1     }   },   data(){     return{       msg:1     }   } } </script>   //子组件，this.$parent直接触发父组件的方法 <template>   <div class="hello">     <h1>我是子组件<button @click="changeFatherData">点击我更改父组件数据</button></h1>     <h1>父组件数据：{     
      {msg}}</h1>        </div> </template>  <script> export default {   name: 'HelloWorld',   props: {     msg: Number,   },   data(){     return{       text:"我是子组件数据，我想发送给父组件",       num:12     }   },   methods:{     changeFatherData(){       this.$parent.changeMsg(this.text,this.num)     }   }, } </script>  <style scoped lang="scss">  </style> 

四、小陈简介

哈，好久没更新了，离职状态在认真学习，卑微码农，很高兴你可以看我整理的东西，一起进步，如果对文章有疑问可以评论哈，或者有问题也可以交流。