vue中父组件向子组件props函数 拿到子组件的值

在Vue.js中，父组件通过`props`属性将数据传递给子组件。如果你想要从父组件获取子组件的某个函数的返回值，通常是在父组件内通过`this.$refs`引用到子组件实例，然后调用这个函数。这里的`$refs`是一个特殊的属性，用于访问子组件实例。

例如：

<!-- 父组件模板 -->
<template>
  <div>
    <child-component ref="myChild"></child-component>
    <button @click="getFromChildFunction">获取子组件函数值</button>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    getFromChildFunction() {
      // 使用 $refs 访问子组件
      const childValue = this.$refs.myChild.childFunction();
      console.log(childValue);
    }
  }
};
</script>

在这个例子中，当你点击按钮时，会触发`getFromChildFunction`方法，它会调用子组件`childFunction`并打印其返回值。假设`ChildComponent.vue`中有名为`childFunction`的方法：

// 子组件 ChildComponent.vue
export default {
  name: 'ChildComponent',
  props: ['parentData'],
  methods: {
    childFunction() {
      return this.parentData * 2; // 这只是一个示例，实际功能取决于子组件设计
    }
  }
}