Vue コンポーネント化の一般的な方法: コンポーネント値の転送と通信

関連する知識ポイント

• 親コンポーネントから子コンポーネントに値を渡す
• 子コンポーネントから親コンポーネントに値を渡す
• 兄弟コンポーネント間で値を渡す
• 祖先と子孫の間で値を渡す
• 任意の2つのコンポーネント間で値を渡す

親コンポーネントから子コンポーネントに値を渡す

親コンポーネントから子コンポーネントに値を渡す基本的な方法は 3 つあります。

• 小道具
• 参照 $refs
• $子供

日常の開発では、props と $refs をよく使い、$children はあまり使いません（ほとんど使っていません～）。

小道具

親コンポーネントにプロパティを追加し、子コンポーネントでそれを受け取ります。例:

親コンポーネント:

<HelloWorld msg="Vue.js アプリへようこそ" />

サブコンポーネント:

<h1>{{ メッセージ }}</h1>

小道具: {
 メッセージ: 文字列
}

参照 $refs

親コンポーネントでは、 this.$refs.xxx を使用して、子コンポーネントで定義されたデータやメソッドを取得して使用することができます。

親コンポーネント:

<HelloWorld ref="hw" />

マウント() {
 this.$refs.hw.foo = "bar";
}

サブコンポーネント:

<p>{{ フー }}</p>

データ（） {
 戻る {
 フー: 「フー」
 };
}

注記：

実際の DOM がまだマウントされていないため、作成されたライフサイクルでは this.$refs.xxx は使用できません。どうしても必要な場合は、vm.$nextTick を使用して DOM にアクセスできます。または、次のように理解することもできます。親コンポーネントは子コンポーネントの前に作成されます。子コンポーネントは親コンポーネントの作成ライフサイクル中に作成されていないため、子コンポーネントを取得できません。

Vue では、コンポーネント ライフサイクルの呼び出し順序は次のとおりです。

コンポーネントを呼び出す順序は最初に親、次に子であり、レンダリングの順序は最初に子、次に親です。

コンポーネントの破棄操作は、最初に親、次に子であり、破棄の順序は最初に子、次に親です。

レンダーパスの読み込み

• 親 beforeCreate
• 親が作成した
• 親 beforeMount
• サブ beforeCreate
• サブを作成しました
• マウント前のサブ
• サブマウント
• 親マウント

サブコンポーネントの更新プロセス

• 親 beforeUpdate
• 更新前サブ
• サブが更新されました
• 親が更新されました

親コンポーネントの更新プロセス

• 親 beforeUpdate
• 親が更新されました

破壊プロセス

• 親 beforeDestroy
• 前の子を破棄
• 子供が破壊された
• 親が破壊された

作成された() {
 console.log("最初の実行");
 console.log(this.$refs.hw); // 未定義
 this.$nextTick(() => {
 console.log("3回目の実行");
 console.log(this.$refs.hw); // この時点で取得できます});
}

マウント() {
 console.log("2回目の実行");
 this.$refs.hw.foo = "bar";
}

$子供

親コンポーネント:

this.$children[0].xx = "xxx";

注記：

$children は現在のインスタンスの直下の子コンポーネントを取得します。親コンポーネントに複数の子コンポーネントがある場合、$children は順序を保証せず、応答しないことに注意してください。

子コンポーネントから親コンポーネントに値を渡す

子コンポーネントが親コンポーネントに値を渡すために使用するメソッドはカスタム イベントです。子コンポーネントでディスパッチされ、親コンポーネントでリッスンされます。

注: イベント リスナーはイベント ディスパッチャーと同じですが、親コンポーネントで宣言されます。

状況には、パラメータなし、パラメータ 1 つ、パラメータ複数という 3 つの状況があります。

パラメータは渡されません

サブコンポーネント:

これを $emit('childFoo');

親コンポーネント:

<HelloWorld2 @childFoo="onChildFoo"></HelloWorld2>

メソッド: {
 子Foo() {
 console.log("====== onChildFoo =========");
 }
}

パラメータを渡す

パラメータを受け取るには、親コンポーネントで $event を使用します。

サブコンポーネント:

this.$emit('childFooSingle', 'foo');

親コンポーネント:

<HelloWorld2 @childFooSingle="onChildFooSingle($event)"></HelloWorld2>

メソッド: {
 onChildFooSingle(e) {
 console.log(e); // foo
 }
}

複数のパラメータを渡す

親コンポーネントの引数を使用して、配列の形式で渡されるパラメータを受け取ります。

サブコンポーネント:

this.$emit('childFooMultiple', 'foo', 'bar', 'dong');

親コンポーネント:

<HelloWorld2 @childFooSingle="onChildFooMultiple(引数)"></HelloWorld2>

メソッド: {
 onChildFooMultiple(メッセージ) {
 console.log(msg[0]); // フー
 console.log(msg[1]); // バー
 console.log(msg[2]); // ドン
 }
}

兄弟コンポーネント間で値を渡す

$parent や $root などの共通の親コンポーネントを介して、兄弟コンポーネント間で値を渡すことができます。

ブラザーコンポーネント1:

this.$parent.$on('foo', ハンドル);

ブラザーコンポーネント2:

this.$parent.$emit('foo');

祖先と子孫の間で値を渡す

ネストされたコンポーネントが多すぎるため、props を使用してそれらを渡すのは実用的ではありません。Vue は、このタスクを完了するための provide/inject API を提供します。

provide/inject を使用すると、祖先が子孫に値を渡すことができます。

祖先:

提供する（） {
 {foo: 'foo'} を返します
}

子孫：

挿入: ['foo']

注: provide と inject は主に、高レベルのコンポーネント/コンポーネント ライブラリのユースケースを提供します。アプリケーション コードで直接使用することはお勧めしません。これらは、オープン ソース コンポーネント ライブラリでよく使用されます。ただし、子孫が祖先に値を引き継ぐようにしたい場合、この解決策は機能しません。 ！ ！

公式のヒント: バインディングの提供と注入は応答しません。これは意図的なものでした。ただし、listenable オブジェクトを渡すと、そのオブジェクトのプロパティは引き続き応答します。

祖先:

提供する（） {
 戻る {
 洞: this.home
 };
},
データ（） {
 戻る {
 ホーム: ["アプリのホーム"]
 };
}

子孫：

注入: ["ドン"]

this.dong = ["App data"]; // エラーを報告します。提供されたコンポーネントが再レンダリングされるたびに変更が上書きされるため、注入された値を直接変更することは避けてください。
this.dong.push("アプリデータ"); // 正常に変更できます

任意の2つのコンポーネント間で値を渡す

任意の 2 つのコンポーネント間で値を渡すためのソリューションは、イベント バスと Vuex の 2 つがあります。

イベントバス

イベントのディスパッチ、監視、およびコールバック管理を担当する Bus クラスを作成します。

まず bus.js を作成し、それを main.js にインポートして、コンポーネントで使用します。

ステップ1: plugins/bus.jsを作成する

クラスバス{
 コンストラクタ（）{
 this.callbacks = {}
 }
 $on(名前、関数){
 this.callbacks[名前] = this.callbacks[名前] || []
 this.callbacks[名前].push(fn)
 }
 $emit(名前, 引数){
 if (this.callbacks[名前]) {
  this.callbacks[name].forEach(cb => cb(args))
 }
 }
}

デフォルトのバスをエクスポートします。

ステップ2: main.jsにインポートする

「./plugins/bus」からBusをインポートします。
Vue.prototype.$bus = 新しいバス()

ステップ3: コンポーネントで使用する

コンポーネント 1:

this.$bus.$on('foo', ハンドル)

コンポーネント2:

this.$bus.$emit('foo')

ヴュークス

データを管理し、状態の変化をコンポーネントに通知するための一意のグローバル データ マネージャー ストアを作成します。まずは公式ドキュメントのVuexを自分で学んで、詳しい使い方については後ほど特別に書きます〜

要約する

これで、Vue コンポーネント化の一般的な方法であるコンポーネント値の転送と通信に関するこの記事は終了です。Vue コンポーネント値の転送と通信に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。