vue获取父组件方法

在Vue.js中，子组件如果需要访问并调用父组件的方法，可以利用props从父组件传递引用，或者使用自定义事件（$emit）来触发父组件的方法。以下是两种常见的方式：

1. **通过props传递方法**:
如果父组件有一个公开的方法，你可以将其作为prop传给子组件。在子组件内部，可以直接调用这个方法。

// 父组件 (Parent.vue)
export default {
  methods: {
    parentMethod() {
      // ...
    }
  },
  components: {
    ChildComponent: {
      props: ['parentMethod'],
      mounted() {
        this.parentMethod(); // 在这里调用父方法
      }
    }
  }
}

// 子组件 (ChildComponent.vue)
<template>
  <div>
    <!-- ... -->
  </div>
</template>

<script>
export default {
  props: {
    parentMethod: {
      type: Function,
      required: true
    }
  }
}
</script>

2. **通过事件（$emit）触发方法**:
子组件可以发射一个自定义事件，然后在父组件监听该事件并执行相应的方法。

// 父组件 (Parent.vue)
export default {
  methods: {
    handleChildEvent(event) {
      // 这里处理childEvent事件
    }
  },
  components: {
    ChildComponent: {
      methods: {
        callParentMethod() {
          this.$emit('childEvent', 'some data'); // 触发事件并传递数据
        }
      }
    }
  },
  watch: {
    '$on:eventName'(val) {
      this.handleChildEvent(val);
    }
  }
}

// 子组件 (ChildComponent.vue)
<template>
  <button @click="callParentMethod">触发父方法</button>
</template>