問題

在完成前端開發任務時，想在子元件中釋出使用者動態後，自動重新整理頁面便可看到剛釋出的資訊。

嘗試

在子元件中簡單通過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')
          }
        })
    }