表单提交成功后如何不刷新页面调用同页面其他组件？

你当前用axios异步提交表单的写法本身就不会触发页面刷新，只需要在请求成功的then回调中，完成两个组件的通信，触发目标组件的执行逻辑即可，不同技术栈的具体实现方式如下： #

原生JavaScript场景 #

方案1：直接调用暴露的全局方法 #

如果目标组件已经在全局作用域暴露了可调用的方法，直接在成功回调里调用即可，示例：

// 假设你的目标组件已经对外暴露了类似showSuccess()的全局方法
axios( {
    method: 'post',
    url: 'http://127.0.0.1:8000/api/clients',
    data: contactFormData
}).then( function ( response ) {
    console.log( response );
    // 直接调用目标组件方法，可按需传入后端返回的响应数据作为参数
    showSuccess(response.data)
}).catch( function ( response ) {
    console.log( response );
});

方案2：自定义事件通信 #

如果两个模块没有互相暴露的方法，可以用自定义事件实现解耦通信：

// 先在目标组件内提前注册自定义事件监听
document.addEventListener('formSubmitSuccess', (event)=>{
  const responseData = event.detail
  // 此处编写目标组件需要执行的逻辑
})

// 表单提交成功的回调中触发自定义事件
axios.post(...).then(res=>{
  const successEvent = new CustomEvent('formSubmitSuccess', {detail: res.data})
  document.dispatchEvent(successEvent)
})

Vue框架场景 #

父子组件关系 #

如果表单组件和目标组件是父子关系，给目标组件绑定ref属性，通过ref调用组件内部方法即可：

<template>
  <!-- 注册表单组件 -->
  <RegisterForm @submit="handleFormSubmit" />
  <!-- 目标组件，绑定ref -->
  <SuccessTip ref="successTipComp" />
</template>
<script>
export default {
  methods: {
    handleFormSubmit(contactFormData){
      axios({
        method: 'post',
        url: 'http://127.0.0.1:8000/api/clients',
        data: contactFormData
      }).then(res=>{
        // 通过ref调用目标组件的内部方法
        this.$refs.successTipComp.showTip(res.data)
      })
    }
  }
}
</script>

非父子/兄弟组件 #

可以用Pinia/Vuex存储提交成功的状态和响应数据，目标组件监听状态变化触发逻辑，也可以用全局事件总线实现通信。 #

React框架场景 #

父子组件关系 #

父组件将目标组件的执行方法通过props传递给表单组件，提交成功后直接调用传入的props方法即可。

跨层级/无关联组件 #

可以用Context/Redux存储提交状态和返回数据，目标组件通过useEffect监听状态变化触发对应逻辑，也可以用自定义事件实现通信。 #

内容的提问来源于stack exchange，提问作者gerSu