vue 父组件调用子组件的函数 并返回执行结果

在Vue中，父组件调用子组件的函数并返回执行结果可以通过以下两种方法实现：

1. 使用`$refs`属性[^1]：
- 在父组件中，给子组件添加一个`ref`属性，例如`<child-component ref="child"></child-component>`。
- 在父组件中，通过`this.$refs.child`访问子组件实例。
- 调用子组件的函数并获取返回结果，例如`const result = this.$refs.child.functionName()`。

2. 使用`$emit`和事件监听：
- 在子组件中，定义一个函数，并在函数内部使用`$emit`触发一个自定义事件，并传递需要返回的结果，例如`this.$emit('eventName', result)`。
- 在父组件中，通过在子组件上监听该自定义事件，并在回调函数中获取返回的结果，例如`<child-component @eventName="handleEvent"></child-component>`，然后在父组件的`methods`中定义`handleEvent`方法来处理返回的结果。

下面是一个示例代码，演示了如何在Vue中实现父组件调用子组件的函数并返回执行结果：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildFunction">调用子组件函数</button>
    <p>子组件返回结果：{{ childResult }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childResult: ''
    };
  },
  methods: {
    callChildFunction() {
      this.childResult = this.$refs.child.functionName();
    },
    handleEvent(result) {
      this.childResult = result;
    }
  }
};
</script>

<template>
  <div>
    <button @click="handleClick">子组件函数</button>
  </div>
</template>

<script>
export default {
  methods: {
    functionName() {
      return '子组件返回结果';
    },
    handleClick() {
      this.$emit('eventName', '子组件返回结果');
    }
  }
};
</script>