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

4,445 阅读1分钟

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

父组件

<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>