vueサブコンポーネントは親コンポーネントメソッドを呼び出し、メソッドの戻り値に基づいて処理します.どのように実現しますか?

1、シーンを使う
プロジェクトではelement-uiのel-uploadを共通コンポーネントとして簡単に呼び出すことができ、公式のbefore-uploadメソッドは、ファイルサイズの比較、ファイルタイプの制限など、アップロード前に行うことを処理するために使用され、trueまたはfalseに戻ってアップロードの有無を制御します.コンポーネントが親コンポーネントメソッドを呼び出し、親コンポーネントメソッドの戻り値を取得できるようにするには、どのようにしますか?
2、問題の説明
通常、サブコンポーネントは親コンポーネントメソッドを呼び出します:this.$Emit(メソッド名、パラメータ1、パラメータ2)ですが、このメソッドの戻り値は、親コンポーネントメソッドのreturn値ではなくvueオブジェクトです.この場合、パラメータとして高次関数を使用し、親コンポーネントで実行します.

// ===============  1=====================
//    


    export default {
        methods: {
             beforeAvatarUpload(file, callback) {
                let size = file.size / 1024 // kb  
                let res = true
                if (size > 10) {
                    this.$message.error('        ，  1M')
                    res = false
                    callback(res) //          ，  ：callback(true)  ，eslint   ，true  false       res
                }
            }
        }
    }

 
//    
export default {
    methods: {
        onBeforeUpload(file) {
            let res = true
            this.$emit('beforeUpload', file, val => { res = val }) //    val => { res = val }    
            return res
        }
    }
}

もう1つの実装方法:Functionを伝達することによって、サブコンポーネントが親コンポーネントに取得できる方法.

// ============  2=================
//    


    export default {
        methods: {
             beforeAvatarUpload(file) {
                let size = file.size / 1024 // kb  
                if (size > 1024) {
                    this.$message.error('        ，  1M')
                    return false
                }
            }
        }
    }

//    
export default {
    props: {
        //        
        beforeUpload: {
            type: Function
        }
    },
    methods: {
        onBeforeUpload(file) {
            //      ，this.beforeUpload   undefined
            if (this.beforeUpload) {
                return this.beforeUpload(file)
            }
        }
    }
}

この2つのシナリオはいずれも実現可能であり,propsのtypeがFunctionであることが現実的な使用シーンであることがわかる.