vue子组件调用父组件的方法

要实现子组件调用父组件的方法，可以通过子组件触发自定义事件，然后父组件监听这个事件并执行相应的函数。以下是具体的步骤：

1. 子组件触发事件：
   在子组件中，当你需要调用父组件的方法时，可以使用 this.$emit 触发一个自定义事件，并可选择传递相关数据(不传就不写)。

   // 子组件（ChildComponent.vue）
   <script>
   export default {
        
     methods: {
        
       callParentMethod() {
        
         // 触发一个自定义事件，可以携带数据
         this.$emit('call-parent-method', someData);
       }
     }
   }
   </script>
   

2. 父组件监听事件并调用方法：
   在父组件的模板中，你需要在子组件标签上监听这个自定义事件，并关联到父组件的一个方法。

   <!-- 父组件（ParentComponent.vue）模板 -->
   <template>
     <div>
       <child-component @call-parent-method="handleCallFromChild"></child-component>
     </div>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
          
     components: {
          
       ChildComponent
     },
     methods: {
          
       handleCallFromChild(someData) {
          
         // 在这里执行父组件的方法逻辑
         this.myParentMethod(someData);
       },
       myParentMethod(data) {
          
         console.log('父组件的方法被子组件调用了，传入的数据:', data);
       }
     }
   }
   </script>
   

现在，当子组件调用 callParentMethod 方法时，就会触发自定义事件 call-parent-method，父组件监听到这个事件后会执行 handleCallFromChild 方法，进而调用父组件自己的 myParentMethod 方法。