父组件把函数通过props传递给子组件执行

最新推荐文章于 2025-06-26 21:36:13 发布

转载最新推荐文章于 2025-06-26 21:36:13 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b6d2f9b51882519790cb7e9

文章标签：

#javascript #ViewUI

本文介绍了一个Vue应用中父组件如何通过传递回调函数的方式与子组件进行通信的例子。父组件定义了两个方法uploadSuccess和uploadFail作为回调，并将它们作为属性传递给子组件。子组件在其mounted钩子中调用这些方法来触发父组件中的相应处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件传递回调函数给子组件，子组件把参数传回给父组件。

父组件

<template>  
  <i-upload :success="uploadSuccess" :fail="uploadFail"></i-upload>
</template>

<script>
import Upload from '@/components/upload'
export default {
  components: {
    'i-upload': Upload
  },
  methods: {    
    // 成功回调    
    uploadSuccess (response) {
      console.log(response) //111111111
    },
    // 失败回调
    uploadFail (error) {
      console.log(error) //222222222
    }
  }
</script>复制代码

子组件

<script>
export default {
  name: 'upload',
  props: {
    success: {
      type: Function
    },
    fail: {
      type: Function
    }
  },
  mounted () {
    this.success(111111111)
    this.fail(222222222)
  }}
</script>复制代码