Javascript

Vue通过父子组件通信刷新页面

本文主要是介绍Vue通过父子组件通信刷新页面,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

问题

在完成前端开发任务时,想在子组件中发布用户动态后,自动刷新页面便可看到刚发布的信息。

尝试

在子组件中简单通过this.$router.replace({path})并不能达到目的。几经查阅,寻得几种可以刷新页面的方法,并了解到父子组件通信。便想到一解决思路。

思路

子组件成功完成请求后,转递信息给父组件,准确一点说,子组件完成相关操作后通过this.$emit(),调用父组件的方法,在父组件的方法中完成刷新操作。
重要的部分:

  • 如何刷新页面?
  • 如何当子组件完成操作时,父组件响应?

我所采用的刷新页面的方法是:

  1. 新建一个空的组键,为该组件编写created()
created () {
    this.$router.replace({path: '/index'})
  }
  1. 在index.js中,为该组件进行注册
{
      path: '/empty',
      name: 'empty',
      component: empty
    }
  1. 在父组件中,编写一方法跳转到该组件
refresh () {
      this.$router.replace({path: '/empty'})
    }

以上便是刷新页面的简单方法


接下来便是父子组件通信
我所采用的是通过vm.$emit()达到通信目的

参考链接:
https://cn.vuejs.org/v2/api/#vm-emit
https://www.cnblogs.com/sweeneys/p/10201458.html

  1. 父组件中监听子组件所调用的方法
<UserDynamic v-on:post="refresh"></UserDynamic>

解析:

  • post为子组件中的方法,其中完成post请求
  • refresh为父组件的方法,响应监听时间
  1. 子组件内的post()使用this.$emit()
post () {
      const token = localStorage.getItem('token')
      this.$axios.post('/dynamic/', {
        content: this.userDynamic.content
      }, {
        headers: {
          'Authorization': token
        }
      })
        .then(response => {
          if (response.data.code === 200) {
            this.$emit('post')
          }
        })
    }
这篇关于Vue通过父子组件通信刷新页面的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!