Vue はコンポーネント間の通信をどのように実装しますか?

1. 父と息子のコミュニケーション

最も一般的な通信は父と息子の間で行われ、双方向のデータ転送です。

1.1 親コンポーネント --> 子コンポーネント

親コンポーネントが子コンポーネントにデータを渡す方法は、Prop を介して子コンポーネントにデータを渡すことです。

// 子.vue
<テンプレート>
    <div>
        私は息子で、父から{{value}}としてデータを受け取りました
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    小道具:{
        値: 文字列
    }
}

//アプリ.vue
<テンプレート>
  <div id="アプリ">
    <子:値="x" />
  </div>
</テンプレート>

<スクリプト>
'./components/Child' から Child をインポートします。
エクスポートデフォルト{
  データ（）{
    戻る {
      x: 'こんにちは、子供'
    }
  },
  コンポーネント:{
    子供
  }
}
</スクリプト>

1.2 子コンポーネント --> 親コンポーネント

子コンポーネントが親コンポーネントにデータを渡す方法は、子コンポーネントの $emit を通じてカスタムイベントをトリガーすることです。子コンポーネントが使用されると、v-on はカスタムイベントをリッスンするようにバインドされます。

ここでの v-on イベント通信は、サブコンポーネントによって使用されるときに、サブコンポーネントのイベント属性として自動的にリッスンされます。

したがって、子コンポーネントは、子コンポーネントが使用するカスタムイベント属性に応じて、親コンポーネントにデータを渡します。

// 子.vue
<テンプレート>
    <div>
        私は息子で、父から{{value}}としてデータを受け取りました
        <button @click="こんにちは">
            親コンポーネントに挨拶しましょう</button>
    </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
    小道具:{
        値: 文字列
    },
    方法:{
        こんにちは（）{
            this.$emit('sayHi','こんにちは、親御さん!');
        }
    }
}
</スクリプト>

//アプリ.vue
<テンプレート>
  <div id="アプリ">
    私は親コンポーネントであり、子コンポーネントから受け取るデータは{{y}}です
    <子:value="x" @sayHi="y = $event"/>
  </div>
</テンプレート>

<スクリプト>
'./components/Child' から Child をインポートします。
エクスポートデフォルト{
  データ（）{
    戻る {
      x: 'こんにちは、子供',
      y: ''
    }
  },
  コンポーネント:{
    子供
  }
}
</スクリプト>

2. 祖父と孫のコミュニケーション

祖父と孫の間のコミュニケーションには、祖父から父親へのコミュニケーションと、父親から息子へのコミュニケーションの 2 つの v-on コミュニケーションを使用できます。

次のいずれかのコンポーネント間通信方法を使用することもできます。

3. コンポーネント間の通信

コンポーネント間の通信では、A が B と通信しているのか、B が A と通信しているのかを区別する必要がなくなりました。代わりに、通信は普遍的な方法になります。データを送信したい人は対応する API を使用してデータを送信し、データを受信したい人は対応する API を使用してデータを受信します。

コンポーネント間で通信する方法は 2 つあります。1 つは EventBus パブリッシュ/サブスクライブモード通信を使用する方法で、もう 1 つは Vuex 通信を使用する方法です。

3.1 イベントバス

EventBus は文字通りイベントバスを意味します。トリガーされたイベントによって送信されたすべてのデータは、フロントドアからバス上に保存され、その後、対応するイベントデータは、対応するイベントによって提供される出口をリッスンすることでバスから降りることができます。

EventBus は実際にはパブリッシュとサブスクライブモードを意味します。つまり、データを渡す人は、カスタムイベントをトリガーする API を通じてデータをパブリッシュする必要があります。データ情報を受信する必要がある人は、イベント監視 API を通じてデータを監視する必要があります。監視対象データのパブリッシュが検出されると、そのデータが受信されます。これがデータサブスクリプションです。

EventBus 通信で最も重要なことは、パブリッシング API とサブスクリプション API を理解することです。Vue では、Vue インスタンスは$emitと$on 2 つのインターフェースを提供するため、新しい空の Vue インスタンスを作成して、これら 2 つのインターフェースを取得できます。

Vue.js の eventBus を新規作成します。
eventBus.$emit(eventName, […args]) //イベントを公開する eventBus.$on(event, callback) //イベントをサブスクライブする

以下に例を示します。

// イベントバス.js
'vue' から Vue をインポートします
エクスポート const eventBus = new Vue();

//子供
<テンプレート>
    <div>
        私は息子で、父からデータを<strong>{{value}}</strong>として受け取りました
        <button @click="こんにちは">
            親コンポーネントに挨拶しましょう</button>
        <button @click="兄弟">
            兄弟コンポーネントに挨拶しましょう</button>
    </div>
</テンプレート>

<スクリプト>
'../eventBus.js' から {eventBus} をインポートします。
エクスポートデフォルト{
    小道具:{
        値: 文字列
    },
    方法:{
        こんにちは（）{
            this.$emit('sayHi','こんにちは、親御さん!');
        },
        兄弟(){
            eventBus.$emit('sibling','hi,brother');
        }
    }
}
</スクリプト>

<スタイルスコープ>
    強い{
        色: 赤;
    }
</スタイル>

//兄弟
<テンプレート>
    <div>
        私は兄弟コンポーネントであり、息子コンポーネントから受け取るデータ情報は <strong>{{x}}</strong> です。 
    </div>
</テンプレート>

<スクリプト>
'../eventBus.js' から {eventBus} をインポートします。
エクスポートデフォルト{
    データ（）{
        戻る {
            ×: ''
        }
    },
    マウントされた(){
        eventBus.$on('兄弟', (msg)=>{
            this.x = メッセージ;
        })
    }
}
</スクリプト>

<スタイルスコープ>
    強い{
            色: 緑;
    }
</スタイル>

//親
<テンプレート>
  <div id="アプリ">
    私は親コンポーネントであり、子コンポーネントから受け取るデータは <strong>{{y}}</strong> です。
    <子:value="x" @sayHi="y = $event"/>
    <兄弟></兄弟>
  </div>
</テンプレート>

<スクリプト>
'./components/Child' から Child をインポートします。
'./components/Sibling' から Sibling をインポートします。
エクスポートデフォルト{
  データ（）{
    戻る {
      x: 'こんにちは、子供',
      y: ''
    }
  },
  コンポーネント:{
    子供、
    兄弟
  }
}
</スクリプト>

<スタイルスコープ>
    強い{
            色: 青;
    }
</スタイル>

EventBus に関しては、次のような疑問があるかもしれません。Vue インスタンスに $emit と $on があるので、イベントをトリガーするには this.$emit を使用し、イベントを受信するには this.$on を使用しないのはなぜでしょうか。追加の空のインスタンス eventBus = new Vue() も必要です。これは、Vue 内の各コンポーネントが個別の Vue インスタンスであるためです。この Vue インスタンスでこのインスタンスの emitting イベントをトリガーすると、別のインスタンスの on イベントを受信できません。同じバス上にいない場合、イベント通信はどのように実行できるのでしょうか。そのため、公共バス、つまりイベントバスが必要になります。

上記の例でのeventBusの使用はローカルeventBusです。eventBusを使用したい人は手動で導入する必要があります。 vue のプロトタイプにぶら下げるなど、eventBus をグローバルにすることもできます。

//メイン.js
'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。

Vue.config.productionTip = false

Vue.prototype.$eventBus = new Vue(); //この文を追加します。以下の新しい Vue の前にある必要があります。

新しいVue({
  レンダリング: h => h(App),
}).$mount('#app')

//子供
兄弟(){
    this.$eventBus.$emit('sibling','hi,brother');
}

//兄弟
マウントされた(){
    this.$eventBus.$on('sibling', (msg)=>{
        this.x = メッセージ;
    })
}

Vue プロトタイプにプロパティを追加する上記の方法に加えて、Object.defineProperty() を使用して Vue プロトタイプにプロパティを追加することもできます。

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。

Vue.config.productionTip = false

eventBus = new Vue() とします
Object.defineProperty(Vue.prototype,'$eventBus',{
  得る（）{
    イベントバスを返す
  }
})

新しいVue({
  レンダリング: h => h(App),
}).$mount('#app')

3.2 ヴュークス

Vue コンポーネント間の通信では、vue.js アプリケーション専用に開発された状態管理モードである Vuex も使用できます。 Vuex の使用は比較的複雑です。詳細については、Vuex ブログを参照してください。 Vuex は、大規模で複雑な Vue プロジェクトの状態管理に適しています。一部の中小規模のアプリケーションでは、状態管理に Vuex の原則に従ってストアモードをカスタマイズできます。Vue のカスタム状態管理の詳細については、「Vue のシンプルな状態管理 - ストアモードブログ」を参照してください。

Vuex であってもカスタムストアモードであっても、コンポーネント間の通信を実現するという原則は、データの共有によって実現されます。コンポーネントは同じデータソースを使用します。1 つのコンポーネントのデータが変更されると、別のコンポーネントが依存するデータソースも変更されます。

上記は、Vue がコンポーネント間の通信を実装する方法の詳細です。Vue コンポーネント間の通信の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: