如何从自定义子组件调用父函数？_如何从子组件调用父函数_如何从类父组件中调用函数子组件方法 - 腾讯云开发者社区

从自定义子组件调用父函数有多种方法，以下是其中两种常用的方式：

使用Props传递函数：父组件可以通过Props将自身的函数传递给子组件，使子组件能够调用父函数。具体步骤如下：

在父组件中定义一个函数，并将该函数作为Props传递给子组件：

// 父组件
<template>
  <div>
    <ChildComponent :callParentFunc="myFunction" />
  </div>
</template>

<script>
export default {
  methods: {
    myFunction() {
      // 父函数的具体实现
    }
  },
  components: {
    ChildComponent
  }
}
</script>

在子组件中，通过Props接收父函数，并在需要的地方调用该函数：

// 子组件
<template>
  <div>
    <button @click="callParentFunc">调用父函数</button>
  </div>
</template>

<script>
export default {
  props: {
    callParentFunc: {
      type: Function,
      required: true
    }
  },
  methods: {
    callParentFunc() {
      this.callParentFunc(); // 调用父函数
    }
  }
}
</script>

使用事件派发：父组件可以通过自定义事件的方式，将自身的函数绑定到子组件上，使子组件能够通过触发事件来调用父函数。具体步骤如下：

在父组件中，通过v-on指令绑定一个自定义事件，并在触发事件时调用父函数：

// 父组件
<template>
  <div>
    <ChildComponent @callParentFunc="myFunction" />
  </div>
</template>

<script>
export default {
  methods: {
    myFunction() {
      // 父函数的具体实现
    }
  },
  components: {
    ChildComponent
  }
}
</script>

在子组件中，通过$emit方法触发绑定的自定义事件：

// 子组件
<template>
  <div>
    <button @click="callParentFunc">调用父函数</button>
  </div>
</template>

<script>
export default {
  methods: {
    callParentFunc() {
      this.$emit('callParentFunc'); // 触发绑定的自定义事件
    }
  }
}
</script>

这两种方式都可以实现从自定义子组件调用父函数的目的。使用Props传递函数更适用于父子组件之间需要频繁进行函数调用的情况，而使用事件派发更适用于单次触发父函数的情况。根据具体的业务需求，选择适合的方式来实现子组件调用父函数的功能。

腾讯云相关产品推荐：

云函数SCF（Serverless Cloud Function）：提供无服务器函数服务，通过函数即服务（FaaS）模型，支持事件驱动的函数计算。详细信息请参考：云函数SCF产品介绍
云服务器CVM（Cloud Virtual Machine）：提供安全、可靠的弹性计算服务，可轻松创建和管理云服务器实例。详细信息请参考：云服务器CVM产品介绍