vue-子组件调用父组件方法并获取返回值
有木有遇到项目中列表渲染时,后台返回数据需要翻译,如返回的是 1/0,需要翻译成 男/女,当然,如果你直接用的,则直接编写方法或filter即可,这里说的是自定义封装的table组件。1、首先想到的是$emit(),但是此方法返回值是vue对象,而不是父组件方法中return的值,这里就不展示了。2、然后曾经我也用过$parent直接调用父级的方法,如下sexFilter(value){retur
·
有木有遇到项目中列表渲染时,后台返回数据需要翻译,如返回的是 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
}
更多推荐
已为社区贡献3条内容
所有评论(0)