在Vue项目中，为了处理后台接口返回字段的翻译问题，文章介绍了如何从子组件调用父组件的方法并获取返回值。文中详细对比了三种方法：1) 使用`this.$parent`直接访问，但不推荐；2) 通过`this.$emit`配合回调函数，将返回值传递给子组件；3) 通过子组件props接收父组件的函数，直接调用获取返回值。最后，作者建议使用第三种方式，因为它更符合组件化开发的原则。
项目中渲染页面列表，遇到与后台接口联调返回的字段需要翻译，使用的组件是自定义组件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方法，用回调函数作为参数，父组件里执行该回调函数，返回值后给子组件，然后子组件再接收
子组件调用父组件方法，执行回调函数：
translateFil(columnsItem,dataItem){
let itemName= null;this.$emit('translateFilter',{
key:columnsItem.key,
data:dataItem[columnsItem.key]
}, val=> { itemName =val })returnitemName
},
这里注意是es6的写法ÿ
最低0.47元/天 解锁文章
扫一扫
4428
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
