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

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

问题

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

尝试

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

思路

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

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

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

1. 新建一个空的组键，为该组件编写created()

created () {
    this.$router.replace({path: '/index'})
  }

2. 在index.js中，为该组件进行注册

{
      path: '/empty',
      name: 'empty',
      component: empty
    }

3. 在父组件中，编写一方法跳转到该组件

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为父组件的方法,响应监听时间

2. 子组件内的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通过父子组件通信刷新页面的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！