vue-子组件调用父组件方法并获取返回值_vue父组件调用子组件方法返回值-CSDN博客

本文链接：https://blog.csdn.net/z858466/article/details/118216532

本文介绍了在Vue项目中，如何解决列表渲染时后台返回的数据需要进行翻译的问题。探讨了多种解决方案，包括使用$emit(), $parent直接调用父级方法，父组件传递方法给子组件，以及使用this.$emit方法配合回调函数。

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

有木有遇到项目中列表渲染时，后台返回数据需要翻译，如返回的是 1/0,需要翻译成男/女，当然，如果你直接用的,则直接编写方法或filter即可，这里说的是自定义封装的table组件。

1、首先想到的是$emit(),但是此方法返回值是vue对象，而不是父组件方法中return的值，这里就不展示了。

2、然后曾经我也用过$parent直接调用父级的方法，如下

sexFilter(value){
    return this.$parent.sexFilter(value)
}

但是也总觉得有点别扭，不太科学，更重要的是如果你父组件中调用子组件时又是套在其他组件中的，如

<Drawer>
    <child></child>
</Drawer>

这样的话在子组件用$parent.sexFilter()就可能会找不到该方法了，需要两层$parent才能正确找到该方法(有遇到过的请举手)。

3、另外一种，父组件把方法传递给子组件

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

然后子组件通过props接收，然后直接调用，如果是固定几个方法也可以用，要是方法名都是完全动态的，就尴尬了。。。

4、最后介绍另一种方法：this.$emit方法，用回调函数作为参数，父组件里执行该回调函数，返回值后给子组件，然后子组件再接收，父组件：

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

父组件方法：

translateFilter(obj,callback){
      let objChild = null;
      if(obj.key == 'sex'){
          objChild = this.sexList.find(item => item.value == obj.value)
      }
      callback(objChild ? objChild.label : '');  // 执行作为参数的函数，传入文字翻译
    }

子组件调用：


valFormatter(key, val){
       let itemName = null;
        this.$emit('translateFilter',{
            key:key,
            value:val
        }, val => { itemName = val })

        return itemName

    }