父组件修改了子组件信息 父组件调用接口时参数还是旧参数
时间: 2023-09-18 22:07:21 浏览: 75
vue 父组件中调用子组件函数的方法
这种情况可能是因为在父组件中调用接口时,使用了旧参数而没有更新为子组件中最新的参数。
你可以尝试在父组件中使用 ref 获取子组件,并在子组件中使用 $emit 触发一个自定义事件,将最新的参数传递给父组件。然后在父组件中监听这个自定义事件,并更新调用接口时使用的参数。
示例代码如下:
子组件中:
```
<template>
<div>
<!-- 子组件中的表单 -->
<el-form ref="form" :model="formData" @submit.native.prevent>
<!-- 表单项 -->
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
formData: {
// 表单数据
}
}
},
methods: {
// 提交表单
submitForm() {
// 触发自定义事件,并传递最新的参数
this.$emit('update:param', this.formData);
}
}
}
</script>
```
父组件中:
```
<template>
<div>
<!-- 父组件中调用子组件 -->
<ChildComponent ref="child" @update:param="handleUpdateParam" />
</div>
</template>
<script>
export default {
methods: {
// 更新参数
handleUpdateParam(param) {
// 更新调用接口时使用的参数
this.apiParam = param;
// 调用接口
this.callApi();
},
// 调用接口
callApi() {
// 使用最新的参数调用接口
// ...
}
}
}
</script>
```
阅读全文