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

在 Vue 2 中，子组件想要调用父组件的方法，可以使用 `this.$parent` 或者 `$emit` 来实现。这是通过事件系统完成的：

1. **通过 $parent**:
子组件可以在需要的时候直接引用 `this.$parent`，然后访问父组件暴露的方法。例如，在子组件的模板里：

   <button @click="callParentMethod">调用父方法</button>

   <script>
   export default {
     methods: {
       callParentMethod() {
         this.$parent.parentMethod();
       }
     }
   }
   </script>

这样，当按钮被点击时，会执行 `parentMethod`。

2. **通过 $emit** (事件发射):
如果你想让父组件主动触发某个行为，通常会通过 `v-on` 或者 `@` 指令绑定到 `parent-method` 的事件上。在子组件里先发出事件：

   <button @click="emitEvent">调用父方法</button>

   <script>
   export default {
     methods: {
       emitEvent() {
         this.$emit('parent-method');
       }
     }
   }
   </script>

然后在父组件的模板里接收这个事件并处理：

   <template>
     <div>
       <child-component @parent-method="handleParentMethod"></child-component>
     </div>
   </template>

   <script>
   import ChildComponent from './ChildComponent.vue';

   export default {
     components: { ChildComponent },
     methods: {
       handleParentMethod() {
         // 处理父组件接收到的方法调用
       }
     }
   }
   </script>