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

在Vue.js中，子组件可以调用父组件的方法通常通过事件系统和props属性来实现。以下是两种常见的方式：

1. **通过`$emit`触发自定义事件**: 子组件可以使用`this.$emit('parent-method-name', 参数)`来触发一个自定义事件，这个名称通常和父组件的某个方法对应。然后，在父组件上监听这个事件，并提供对应的处理函数。

<!-- 子组件 -->
<template>
  <button @click="callParentMethod">调用父方法</button>
</template>

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

<!-- 父组件 -->
<template>
  <ChildComponent @parent-method="handleParentMethod"></ChildComponent>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleParentMethod(arg) {
      console.log(`父组件接收到子组件传来的参数: ${arg}`);
    }
  }
};
</script>

2. **通过`props`传递方法引用**: 如果你想在子组件内部直接调用父组件的方法，可以将父组件的方法作为prop传递给子组件，但在实际场景中这较少见，因为这可能导致组件间的紧密耦合。

<!-- 父组件 -->
<template>
  <ChildComponent :callParentMethod="customMethod"></ChildComponent>
</template>

<script>
export default {
  components: {
    ChildComponent,
  },
  methods: {
    customMethod(param) {
      // 这里是你想让子组件调用的实际方法
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <button @click="executeParentMethod">执行父方法</button>
</template>

<script>
export default {
  props: ['callParentMethod'],
  methods: {
    executeParentMethod() {
      this.callParentMethod('参数');
    }
  }
};
</script>