Vue ページをリフレッシュするために provide と injection を適用する

Vue ページをリフレッシュするために provide と injection を適用する

方法1: 関数を直接呼び出す

ページ全体を再読み込みします。次のいずれかの方法で動作します。

1.ウィンドウの場所を再読み込み()

2. this.$router.go()

方法2: provide / inject (静的更新) を使用する

高階関数でリロード更新関数を宣言する

<テンプレート>
  <div id="app" v-if="表示"></div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  //表示/非表示を制御し、データの更新を実装します(){
    戻る {
      表示: 真
    }
  },
  // 低レベルコンポーネントにリフレッシュメソッドを渡す provide() {
    戻る {
      リロード: this.reload
    }
  },
  メソッド: {
    // 高レベルコンポーネントはリフレッシュメソッド reload() を定義します {
      this.bol = 偽
      this.$nextTick(() => {
        this.bol = 真
      })
    }
  }
}
</スクリプト>

低レベルコンポーネントでリフレッシュ関数を使用する

<テンプレート>
  <div></div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  挿入: ['リロード'],
  メソッド: {
    // 低レベルコンポーネント、リフレッシュ fun () {
      これをリロードします。
    }
  }
}
</スクリプト>

利点の比較

  • 方法 1 で関数を直接呼び出すと、Web サイト全体が更新され、パフォーマンスが低下し、ユーザー エクスペリエンスが低下します。大規模な Web サイトの場合は、ブラウザーの左上隅に更新アニメーションが表示されるまで数秒待つ必要があります。
  • 方法 2 では provide/inject を使用するため、ユーザーは更新を感じず、更新されるページ コンテンツの範囲を制御できるため、パフォーマンスの無駄が少なくなります。

上記は、provide と inject を適用して Vue ページを更新する方法の詳細です。Vue ページの更新の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue での provide/inject の学習と使用
  • Vue.js で provide/inject を使用してレスポンシブなデータ更新を実装する方法の例
  • Vue3 での provide と injection の使用
  • Vue で [provide/inject] を使用してページのリロードを実装する方法
  • Vue プロジェクトで現在のページを更新する 3 つの方法
  • Vue での provide/inject の詳細な適用について説明します

<<:  nginx.conf のルートディレクトリ設定の詳細な説明

>>:  MySQL のユニークインデックスと通常のインデックスのどちらを選択すればよいでしょうか?

推薦する

ノード スキャフォールディングを使用してトークン検証を実装するサーバーを構築する方法

コンテンツスキャフォールディングを使用してノードプロジェクトを素早く構築するデータベースとやり取りす...

W3C が推奨するモバイル Web マークアップ言語 XHTML Basic 1.1

W3C は最近、「 XHTML Basic1.1 」と「 Mobile Web Best Prac...

MySQL 8.0.12 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.12のインストールと設定方法を記録してみんなで共有します。 1. インストール1...

iframeを指すaタグのターゲットの名前とIDの違い

コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...

純粋な CSS を使用してドロップダウン メニューを作成するサンプル コード

導入:最近の面接の質問を見ると、ドロップダウン メニューを実装するために CSS を使用することが多...

MySQL 最適化チュートリアル: 大規模なページングクエリ

目次背景制限の最適化最適化方法1. カバーインデックスを使用する2. サブクエリの最適化3. 遅延連...

ブラウザのスクロールバーのスタイルを変更するための純粋な CSS の例

CSSを使用してブラウザのスクロールバーのスタイルを変更する ::-webkit-スクロールバー{ ...

検証コードケースのjs実装

この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...

角度でechartsマップを使用する詳細な説明

目次echartの初期化アプリベースチャートコンポーネントhtml CS app-base-char...

MySQL でテーブルを作成するときの NULL と NOT NULL の使用方法の詳細な説明

MySQL の仕様によっては、テーブル作成仕様にすべてのフィールドが空であってはならないという要件を...

mysql binlog ログを正しくクリーンアップする 2 つの方法

mysqlはbinlogログを正しくクリーンアップします序文: MySQL の binlog はデー...

...

HTML における要素の水平および垂直中央揃えに関する議論

ページをデザインするときには、ログイン ウィンドウを中央に配置するなど、DIV を中央に配置し、ペー...

Docker環境を構築する簡単な方法

まず、Docker とは何かを理解しましょう。 Docker は、アプリケーションをデプロイするため...

Linux システムで Vim を使用してリモート ファイルを読み書きするコマンドの詳細な説明

vim の動作モードを設定する (一時的) :set (モード情報) :set nu — 行番号を表...