Vue.jsのコンポーネント間通信に使用できる方法はいくつかあります。 ほとんどの場合、通常のpropsおよびeventsで十分ですが、他の方法も自由に使用できます。
小道具とイベント
もちろん、コミュニケーションの通常の方法には、小道具やイベントが含まれます。 この一般的なパターンは、関係するコンポーネントへの依存関係や制限を導入することなく、コンポーネント間で通信するための強力な方法を提供します。
小道具を使用すると、任意のデータ型を子コンポーネントに渡すことができ、コンポーネントが受け取るデータの種類を制御できます。 プロップの更新もリアクティブであり、親データが変更されるたびに子コンポーネントを更新できます。
テンプレートの使用法：
<my-component v-bind:prop1="parentValue"></my-component>
<!-- Or more succinctly, -->
<my-component :prop1="parentValue"></my-component>
イベントは、子の変更を親コンポーネントに通知する方法を提供します。
テンプレートの使用法：
<my-component v-on:myEvent="parentHandler"></my-component>
<!-- Or more succinctly, -->
<my-component @myEvent="parentHandler"></my-component>
イベントの発砲：
...
export default {
methods: {
fireEvent() {
this.$emit('myEvent', eventValueOne, eventValueTwo);
}
}
}
さらに、グローバルイベントバスを作成して、アプリ内のどこにでもイベントを渡すことができます。 それに関する記事があります。
組み合わせ：
v-model を使用すると、プロップとイベントを組み合わせて双方向バインディングを行うことができます。 これは、入力コンポーネントによく使用されます。 v-model は、 valuepropおよびinputイベントを想定していますが、これはcustomizedにすることができます。
テンプレートの使用法：
<my-component v-model="prop1"></my-component>
vモデル互換コンポーネント：
<template>
<div>
<input type="text" :value="value" @input="triggerEvent"/>
</div>
</template>
<script>
export default {
props: {
value: String
},
methods: {
triggerEvent(event) {
this.$emit('input', event.target.value);
}
}
}
</script>
使用時期：コンポーネント間でほぼすべての種類のデータの受け渡しとメッセージングを行う必要があります。
提供/注入
Vue に新しく追加されたのは、提供/注入メカニズムです。 これにより、祖先コンポーネントからそのすべての子孫へのデータまたはメソッドの選択的な公開が可能になります。 Provide / inject 自体はリアクティブではありませんが、リアクティブオブジェクトを渡すために使用できます。
Provide / inject は、アプリを開発するのにおそらく良い考えではありませんが、カスタムレンダリングされたコンポーネントライブラリ全体を作成するときに非常に便利です。
祖先コンポーネント：
const SomethingAllDescendantsNeed = 'Air, probably.';
export default {
provide: {
SomethingAllDescendantsNeed
}
}
子孫コンポーネント：
export default {
inject: ['SomethingAllDescendantsNeed'],
mounted() {
console.log(this.SomethingAllDescendantsNeed);
}
}
テンプレートの使用法：
<ancestor-component>
<div>
<descendant-component>
<p>
<descendant-component></descendant-component>
</p>
</descendant-component>
</div>
</ancestor-component>
（ツリーの深さに関係なく、すべての子孫コンポーネントは SomethingAllDescendantsNeed にアクセスできます。）
使用時期：子コンポーネントは、コンポーネントツリーごとに1回だけインスタンス化される何かのインスタンスにアクセスする必要があります。 （おそらく別の図書館またはイベントバス。）
直接アクセス
注意：ここにサメがいます！
本当に、本当に、本当に、neeeeed して、親または子コンポーネントのプロパティまたはメソッドに直接アクセスする場合は、すべてのコンポーネントのthis。$parentおよびthisを使用できます。 $ children プロパティを使用して、親コンポーネントと子コンポーネントのすべてに完全にアクセスできます。 しかし、これは絶対に、恐ろしく、卑劣で、ひどい考えです。 これを行う必要がある状況に陥った場合は、 99.99958％の可能性があり、何か間違ったことをしたので、リファクタリングする必要があります。
次の場合に使用します。 しないでください。 しないでください。
なぜだめですか？ 親コンポーネントと子コンポーネントの間のマークアップで、実装と構造の両方の間に直接結合を導入しているため、柔軟性がなく、途方もなく壊れやすくなっています。
