父组件页面代码:reqDayDataDetail(body) { cvtWhStockApi.dayDataDetailApi(body).then(res => { let data = res.content; this.dayDataDetailConfig = tableopt.getDayDataDetailConfig(body.queryDate); this.dayDataDetail = tableopt.getDayDataDetail(data); }) },
时间: 2024-02-20 18:57:48 浏览: 41
父页面获取子页面参数
这段代码是一个方法,名为`reqDayDataDetail`,接受一个参数`body`,方法内部调用了`cvtWhStockApi.dayDataDetailApi(body)`方法,该方法返回一个Promise对象,使用`.then()`方法处理返回结果。在处理结果的回调函数中,将获取到的数据`res.content`赋值给`data`变量,然后调用了`tableopt.getDayDataDetailConfig(body.queryDate)`和`tableopt.getDayDataDetail(data)`方法,分别获取当日数据详情表格的表头配置和表格数据,并将它们分别赋值给`dayDataDetailConfig`和`dayDataDetail`变量。
需要注意的是,该方法是在父组件中定义的,如果要在子组件中使用,需要通过`props`属性将该方法传递给子组件。同时,该方法中使用了`this`关键字,所以需要将该方法绑定到父组件实例上,可以在父组件的`created`或`mounted`生命周期函数中绑定该方法,例如:
```vue
<template>
<div>
<child :reqDayDataDetail="reqDayDataDetail"></child>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
components: {
Child
},
data() {
return {
dayDataDetailConfig: [],
dayDataDetail: []
}
},
methods: {
reqDayDataDetail(body) {
cvtWhStockApi.dayDataDetailApi(body).then(res => {
let data = res.content;
this.dayDataDetailConfig = tableopt.getDayDataDetailConfig(body.queryDate);
this.dayDataDetail = tableopt.getDayDataDetail(data);
})
}
},
created() {
this.reqDayDataDetail = this.reqDayDataDetail.bind(this);
}
}
</script>
```
在子组件中接收该方法并调用:
```vue
<template>
<div>
<button @click="handleClick">获取当日数据详情</button>
</div>
</template>
<script>
export default {
props: {
reqDayDataDetail: {
type: Function,
default: () => {}
}
},
methods: {
handleClick() {
let body = { queryDate: '2021-08-31' }; // 示例参数
this.reqDayDataDetail(body);
}
}
}
</script>
```
以上代码将父组件的`reqDayDataDetail`方法通过`props`属性传递给子组件,并在子组件的`handleClick`方法中调用该方法。
阅读全文