vue2 における非親子コンポーネントの値の伝達は、主にイベント バスを介して行われ、vue インスタンスを作成し、そのインスタンスを異なるコンポーネントにインポートすることで、非親子コンポーネント間の通信動作を実装します。 Vue3 は **provide** プロパティと **inject** プロパティを提供しており、親子関係のないコンポーネント間の通信を実現できます。 App.vue (親)、sub1 (子)、sub2 (子の子) の 3 つのコンポーネントがあるとします。 アプリ.vue<テンプレート> <div style="border: 1px solid pink"> <h1>私はあなたの父親です</h1> 👇 <sub1/> </div> </テンプレート> <スクリプト> './sub1' から sub1 をインポートします エクスポートデフォルト{ 名前:「アプリ」、 コンポーネント:{ サブ1、 }, provide:{ // 親コンポーネントで provide を定義して、渡される値を宣言します names:['peanut','javascriptKing'] } } </スクリプト> <スタイルスコープ> </スタイル> サブ1.vue<テンプレート> <h2>私は第 1 レベルの子コンポーネントです</h2> 👇 <sub2/> </テンプレート> <スクリプト> 「./sub2」からsub2をインポートします。 エクスポートデフォルト{ 名前: "sub1", コンポーネント:{ サブ2、 } } </スクリプト> <スタイルスコープ> </スタイル> サブ2.vue<テンプレート> <h3>私は末っ子、孫です</h3> <div>トップレベルコンポーネントの名前配列を参照しました ===> {{names}}</div> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: "sub2", // inject:['names'] を通じて子コンポーネントでクロスレベル値を受け入れます。 } </スクリプト> <スタイルスコープ> </スタイル> 実装効果は次のようになり、トップレベルコンポーネントで渡された値が正常に取得できることがわかります。 しかし、問題もあります。 つまり、トップレベルのコンポーネントが渡したい値が変更された場合、どうすればそれを応答性のあるものにできるでしょうか? provide プロパティでこれを使用して現在のインスタンスを取得するにはどうすればよいでしょうか? ここでは、provide 属性をメソッドとして記述し、配列またはオブジェクトを返す必要があります。 <テンプレート> <div style="border: 1px solid pink"> <h1>私はあなたの父親です</h1> 👇 <sub1/> </div> </テンプレート> <スクリプト> './sub1' から sub1 をインポートします エクスポートデフォルト{ 名前:「アプリ」、 データ(){ 戻る { 名前:['ピーナッツ','javascriptキング'] } }, コンポーネント:{ サブ1、 }, /*このように書いても、this は取得されません。現時点では、スクリプト内の this のスコープが未定義であることを意味します*/ /*提供する:{ this.names、 }*/ // 次のように記述する必要があります provide(){ 戻る { 名前:this.names } } } </スクリプト> <スタイルスコープ> </スタイル> 上で書いたように、これで指し示すインスタンス配下のデータを取得することはできるのですが、これらを依存関係を形成させて応答性を実現するにはどうすればよいのでしょうか。これを行うには、App.vue に次の変更を加える必要があります。 <テンプレート> <div style="border: 1px solid pink"> <h1>私はあなたの父親です</h1> 👇 <sub1/> </div> </テンプレート> <スクリプト> './sub1' から sub1 をインポートします 'vue' から { computed } をインポートします エクスポートデフォルト{ 名前:「アプリ」、 データ(){ 戻る { 名前:['ピーナッツ','javascriptキング'] } }, コンポーネント:{ サブ1、 }, /*このように書いても、this は取得されません。現時点では、スクリプト内の this のスコープが未定義であることを意味します*/ /*提供する:{ this.names、 }*/ // 次のように記述する必要があります provide(){ 戻る { names:computed(() =>{ this.names.length }) // 計算プロパティを使用して変数を返すことで、names がデータ内の名前と依存関係を形成するようにします} }, マウント() { 設定間隔(()=>{ this.names.push('vue king!') },1000) } } </スクリプト> <スタイルスコープ> </スタイル> 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ログインインターフェースの使いやすさとセキュリティのバランスをとる方法
>>: Linux での JDK のインストール (OpenJDK のアンインストールを含む) の概要
画面紹介Screen は、コマンドライン端末切り替え用に GNU プロジェクトによって開発されたフリ...
目次1. ホームページ制作1. ダウンロードアプリの制作2. ナビゲーションバーの制作3. カルーセ...
一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われています。これは HTML 言...
序文docker イメージを削除できません。docker docker imagesを確認すると、イ...
ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォル...
効果コード内の画像は自分で変更できますドロップダウンメニューのHTMLコード <ヘッダークラ...
HOCを紹介する一文高階コンポーネント (HOC) とは何ですか? 公式ドキュメントによると、「高階...
1. Dockerリモート接続ポートを設定するサーバー上の docker.service ファイルを...
pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...
ビンログBinLog は、データベース テーブル構造の変更 (テーブルの作成、変更など) とテーブル...
目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...
目次1. ユーザーを追加する2. ユーザー名とホストを変更する3. パスワードを変更する4. ユーザ...
1. まずは効果を見てみましょうインターフェース要求によって返されるデータ: 2. 公式ログインフロ...
目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...
rpmコマンドがソフトウェアのインストールに使用するパラメータはどれですか: -i rpm コマンド...