Vue2は応答性を提供するためにprovide injectを実装しています

Vue2は応答性を提供するためにprovide injectを実装しています

1. vue2 での従来の書き方

// 親コンポーネントは 'foo' を提供します
var プロバイダー = {
データ(){
    戻る {
        foo: 'バー'
    }
}
  提供する:
    fooProvide: this.fooFn // 参照型関数を渡す},
 方法:{
     fooFn() {
        this.foo を返す
      }
 }
}

var 子 = {
  挿入: ['fooProvide'],
  計算:{
      fooComputed(){
          return this.fooProvide() // 渡された関数は参照型なので}
  }
  作成された(){
    コンソールログ(this.fooComputed) 
  }
  // ...
}

2. vue2 での型破りな書き方ですが、使いやすいです。(使い方はおそらく同じですが、渡される値は this--> インスタンス全体になります)

// 親コンポーネントは 'foo' を提供します
var プロバイダー = {
データ(){
    戻る {
        foo: 'バー',
        他の:'...'
    }
}
  提供する:
    app: this // this 全体を過去として渡す},
  マウントされた(){
      const that = this
      タイムアウトを設定します(()=>{
          that.foo = '値を変更'
      },4000)
  }
}

var 子 = {
  挿入: ['app'],
  作成された(){
    console.log(this.app.foo) // this.app の下にあるものはすべて同じインスタンスへの参照であるため、応答します}
  // ...
}

3. vue2 + ts (これまで ts を使用したことがない場合は、実際にどのように使用すればよいかわからないため、ここに例を示します)

提供方法:
1. @Provide() foo = 'foo'
2. @Provide('bar') baz = 'bar'

注入方法:
1. @Inject() foo: 文字列
2. @Inject('bar') バー: 文字列
3. @Inject(s) baz: 文字列

例:

// 親コンポーネントは 'fooProvide' を提供します
@Provide('fooProvide') // 好きな名前を付けて、受け取った値と同じ値を渡してください。ただし、通常は以下の変数と同じにしてください。 fooProvide = this.refreshNumFn // 変数は渡される値を受け取ります。 refreshNumFn() {
  this.refreshNumを返す
}

// 子コンポーネントは@Inject('fooProvide') fooProvide: anyを受け取ります
値A() を取得: 任意 {
    this.fooProvide() を返す
  }
マウントされた(){
    console.log(this.valueA) // ...
}

レスポンシブ性を実現するための vue2 の provide inject 実装に関するこの記事はこれで終わりです。vue2 provide inject の関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueはレスポンスの提供と注入の問題を解決します
  • Vue での provide/inject の詳細な適用について説明します
  • Vue での provide / inject の使用に関する簡単な分析
  • Vue で注入を提供するためのレスポンシブな監視ソリューション

<<:  mysql8.0 でユーザーを作成して権限を付与する際のエラーの解決方法の詳細な説明

>>:  Dockerコンテナのインポ​​ートとエクスポートに関するチュートリアル

推薦する

Docker を使用して pypi プライベート リポジトリを構築する方法

1. 建設1. htpasswd.txtファイルを準備するファイルには、パッケージを倉庫にアップロー...

EclipseのプロジェクトをTomcatに追加できない問題を解決する方法

1. プロジェクトを右クリックしてプロパティを選択します2. プロジェクトファセットをクリック3. ...

Nginx を使用してポート転送 TCP プロキシを実装する例

目次需要背景Nginx を使用する理由は何ですか? Nginx によるポート転送依存関係をインストー...

CSS設定div背景画像実装コード

コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。 <表示...

弾力性のあるナビゲーション効果を実現するJavaScript

この記事では、弾性ナビゲーション効果を実現するためのJavaScriptの具体的なコードを参考までに...

Google Chromeの自動入力問題に対する完璧な解決策

Google Chrome では、ログインに成功すると、パスワードを記憶するかどうかを尋ねるメッセー...

優れた登録プロセスの手順

ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...

HTML+CSS で div タグの右上隅に削除アイコンを追加するサンプルコード

1. 要件の説明Divタグの右上隅に削除アイコンを表示します2. 実装html、CSS 3. 参照コ...

MySql 8.0 と対応するドライバー パッケージの一致に関する注意事項

MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...

Windows Server 2019 で NAS を構成する方法

序文このチュートリアルでは最新バージョンをインストールします。 NAS は非常に安定して動作するので...

Vueカウンターの実装

目次1. カウンターの実装2. 成果を達成する1. カウンターの実装ページにカウンターを実装するだけ...

Linux システムを起動時に自動的にスクリプトを実行するように設定する方法の例

序文みなさんこんにちは。私は梁旭です。職場では、システムの起動後にスクリプトやサービスを自動的に開始...

MySQL 5.7 インストール MySQL サービスを開始できませんが、サービスはエラーを報告しません

MySQL 5.7 をインストールするには 2 つの方法があります。1 つはインストーラをダウンロー...

一般的なブラウザ互換性の問題(概要)

ブラウザの互換性とは、スタイルの互換性 (CSS)、インタラクションの互換性 (JavaScript...

MySQL のロングトランザクション例の詳細な説明

序文: 「MySQL 入門」シリーズの記事は終了しました。今後も引き続き MySQL に焦点を当て、...