vue--子組件調用父組件方法並獲取返回值

項目中渲染頁面列表，遇到與后台接口聯調返回的字段需要翻譯，使用的組件是自定義組件Table，類似ElementUI中el-table組件的formatter

首先我們想到的是$emit調用父組件取返回值，this.$emit(方法名, 傳參1, 傳參2)，但是此方法的返回值是vue對象，而不是父組件方法的return值（錯誤代碼就不展示了）

1、嘗試曲線救國，使用this.$parent

子組件直接調用父組件方法：

translateFilter(columnsItem,dataItem){
    return this.$parent.translateFilter({
        key:columnsItem.key,
        data:dataItem[columnsItem.key]
    })
},

en...解決了。但是不盡人意，這種方法開發組件對使用者很不友好。

2、this.$emit方法，用回調函數作為參數，父組件里執行該回調函數，返回值后給子組件，然后子組件再接收

<Table @translateFil="translateFilter"></Table>

子組件調用父組件方法，執行回調函數：

translateFil(columnsItem,dataItem){
    let itemName = null;
    this.$emit('translateFilter',{
        key:columnsItem.key,
        data:dataItem[columnsItem.key]
    }, val => { itemName = val })
    return itemName
},

這里注意是es6的寫法：
val => { itemName = val } 
等價於
function(val){
　　itemName = val;
　　return itemName
}

父組件定義方法：

translateFilter(obj,callback) {
    let objChild = null;
    if(obj.key == 'headFlag'){
        objChild = this.headFlagData.find(item => item.label == obj.data)
    } else if(obj.key == 'contactGender') {
        objChild = this.sexArray.find(item => item.label == obj.data)
    }
    callback(objChild ? objChild.value : '');  // 執行作為參數的函數
},

3、通過傳Function，子組件可獲取到父組件的方法。

<Table :translateFil="translateFilter"></Table>

子組件方法：

props: {
    // 子組件接收函數
    translateFil: {
        type: Function
    }
},

translateFilter(columnsItem,dataItem){
    this.translateFil({
        key:columnsItem.key,
        data:dataItem[columnsItem.key]
    })
    return itemName
},