vue.js怎樣刷新元件

vue.js刷新元件的方法：先給【router-view】標籤加入key屬性將key綁定的值放在狀態管理容器裡面；然後透過狀態管理容器的mutations或actions觸發key值的變化即可。

本教學操作環境：windows10系統、vue2.9，本文適用於所有品牌的電腦。

【相關文章推薦：vue.js】

#vue.js重新整理元件的方法：

開發過程遇到了一個問題，就是我的router-view 裡面渲染出來的元件輸入資料之後，我點擊路由視圖外邊的導覽列router-link 按鈕，可以實現清除router-view 裡面的數據，也就是讓元件重新渲染。

vm.$forceUpdate()這個方法可以讓目前元件呼叫這個方法時，重新渲染元件。為 router-view 標籤新增 key 屬性將 key 綁定的值放在狀態管理容器裡面，透過 狀態管理容器的 mutations 或 actions 觸發 key 值的變化，即可實現重新渲染元件的目的。相關實作程式碼如下

// store/view.js
const state = {
 viewId: 1
};
const getters = {
 getViewId: state => {
  return state.viewId;
 }
};
const mutations = {
 setViewId: (state, payload) => {
  state.viewId++;
 }
};
const actions = {
 setViewId: (context, payload) => {
  context.commit("setViewId", payload);
 }
};
export default {
 namespaced: true,
 state,
 getters,
 mutations,
 actions
};

放置router-view 標籤的Layout 元件

觸發viewid，使router-view 對應的路由元件刷新的地方,例如導覽列組件。

methods: {
  fresh() {
    this.$store.dispatch("view/setViewId")
  }
}

相關免費學習推薦：javascript（影片）

以上是vue.js怎樣刷新元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！