Vue でページ全体または部分更新を実装する方法を詳しく説明します。

vue でページの更新を実装するにはどうすればよいですか?次の記事では、Vue でページ全体の更新と部分更新を実装する方法を紹介します。

1. ページ全体を更新します

1. App.vue を変更します。コードは次のとおりです:

<template>
  <div id="app">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  name: &#39;App&#39;,
  provide() { // 父组件中返回要传给下级的数据
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

重要なポイントは次のとおりです。次の図に示すように:

2. 更新する必要があるページに移動し、挿入を使用してインポートし、リロードを引用します:

#3. メソッド

#2 で this.reload() を呼び出す必要がある場合。部分更新

1。変数 isReloadData を定義し、その変数を更新する必要があるタグ上にバインドします。

2. 部分更新メソッド reloadPart を定義します。 :

3. 部分更新を実行する必要があるメソッドを呼び出します

3. アプリケーション シナリオ

• ページ内で動的に変更された場合 データによっては、props によってもたらされたデータや、関数によって動的に設定された属性などは、変更後に最新のデータが表示されない場合があります。
• ページのデータが変更されると、ページのレンダリングでバグが発生し、たとえば、el-table コンポーネントのデータが変更された後に空白領域が表示されます。

現時点では、ページ全体の更新または部分的な更新が役立ちます。次のスクリーンショットは、私が遭遇した 2 番目の状況の例であり、ページ全体の更新と部分的な更新を使用することで解決されました。

1. デフォルトでは、すべてが選択されており、ページは正常にレンダリングされます:

2. 1 つの表示列をチェックすると、ページは正常にレンダリングされます:

3. チェックを入れた表示列をもう一度確認すると、空白の領域が表示されます:

この時点で、ラジオ選択メソッド内で呼び出すだけで済みます。部分更新メソッド this.reloadPart() を使用すると問題を解決できます。完全選択の場合も同様です。

4. 新しい表示列が追加されるたびに、テーブルに空白の領域が表示されます。現時点では、新しいレコードが追加された後にページ全体の更新メソッド this.reload() を呼び出すだけで済みます。正常に追加されました。

[関連する推奨事項:「vue.js チュートリアル 」]

以上がVue でページ全体または部分更新を実装する方法を詳しく説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。