Vue 兄弟コンポーネント間の通信方法

プロジェクトでは、兄弟コンポーネントが通信する状況によく遭遇します。大規模なプロジェクトでは vuex を導入することでコンポーネント間の通信の問題を簡単に管理できますが、小規模なプロジェクトでは vuex を導入する必要がない場合もあります。以下に、従来の方法を使用して親コンポーネントと子コンポーネント間の通信を実現する方法を簡単に紹介します。この記事では、主に Vue 兄弟コンポーネントの通信方法 (Vuex を使用しない) を紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

簡単な例: コンポーネント a のボタンをクリックして情報をコンポーネント b に渡し、コンポーネント b がポップアップします。

主なアイデアは次のとおりです: まず息子から父親に、次に父親から息子に渡します

まず、a.vue コンポーネントで、イベント内のボタン ボタンに handleClick イベントをバインドします。では、 this.$emit( ) メソッドを渡してカスタム イベントをトリガーし、パラメーターを渡します。

この例では、this.$emit() を使用して isLogFn メソッドのカスタム イベントをトリガーし、ログ パラメーターを渡します

a.vue

<template>
 <p class="ap">
 <p>a组件</p>
 <button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
 </p>
</template>

<script>

export default {
 methods: {
 handleClick () {
  this.$emit(&#39;isLogFn&#39;,&#39;log&#39;)
 }
 }
}
</script>

<style>
.ap{
 width: 400px;
 height: 200px;
 border: 1px solid #000;
 margin: 0 auto;
}
</style>

2 番目のステップは、親コンポーネントでリッスンすることですこのカスタムイベントは、対応するメソッドをトリガーし、コンポーネントによって渡されたパラメーターを受け取ります。この時点で、子コンポーネントから親コンポーネントに値を渡すプロセスが完了しました。

この例では、 は isLogFn をリッスンして、親コンポーネントで定義したメソッド lisLogFn をトリガーし、渡された「ログ」データを取得します。息子から父親への価値の移転を完了します。

この時点では、プロセス全体はまだ終わっておらず、まだ半分しか終わっていません。次に、親コンポーネントと子コンポーネント間の値の転送を完了し、コンポーネント a の情報をコンポーネント b に渡す必要があります。

タグで islog 属性をバインドし、lisLogFn メソッドを通じて「データ」を取得した後、その判断に基づいてデータを変更する必要があります。 result.data() を実行し、それによってデータを b コンポーネントに渡します

App.vue

<template>
 <p id="app">
 <aPage @isLogFn = "lisLogFn"></aPage>
 <bPage :isLog = "login"></bPage>
 </p>
</template>

<script>

import aPage from &#39;./components/a.vue&#39;
import bPage from &#39;./components/b.vue&#39;

export default {
 data () {
 return {
  login: &#39;false&#39;
 }
 },
 name: &#39;app&#39;,
 components: {
 aPage,
 bPage
 },
 methods: {
 lisLogFn (data) {
  if (data == &#39;log&#39;) {
  this.login = &#39;true&#39;
  }
 }
 }
}
</script>

<style>
</style>

最後に、b コンポーネントで props を作成し、渡した値である isLog 属性を定義する必要があります。次に、このデータを計算されたプロパティで処理し、最終的に b コンポーネントによって使用されます。この例では、v-show="isLogin" を使用してポップアップ ウィンドウを開くかどうかを制御します。

覚えておいてください！この props は直接使用することはできず、計算処理を通じて処理する必要があります。その理由は、vue

一方向データフロー

b.vue

<template>
 <p class="bp" v-show="isLogin">我是组件B弹窗</p>
</template>

<script>
export default {
 props: [&#39;isLog&#39;],
 data () {
 return {

 }
 },
 computed: {
 isLogin () {
  if(this.isLog == &#39;true&#39;){
  return true
  } else {
  return false
  }
 }
 }
}
</script>

<style>
 .bp{
 width: 200px;
 height: 200px;
 border: 1px #000 solid;
 margin: 0 auto;
 }

</style>

の公式説明を引用しているためです。兄弟コンポーネント間の値の転送を実装するには、まず息子と父、父と息子の間の値の転送についてよく理解しておく必要があります。

子の親:

1. 子コンポーネントは、クリックイベントメソッドなどの何らかの方法でカスタムイベントをトリガーする必要があります

2. 渡される必要がある値は、$emitの2番目のパラメータとして使用されますこれは、カスタム イベントに応答するメソッドに実際のパラメーターとして渡されます

3. 親コンポーネントに子コンポーネントを登録し、子コンポーネントのラベルにカスタム イベントのリスナーをバインドします

親と子:

1. 子コンポーネントはpropsにあります親コンポーネントから渡される値を受け取るための属性を作成します

2. サブコンポーネントのpropsで作成した属性をサブコンポーネントタグに追加し、渡す必要がある値を代入しますサブコンポーネントへ属性へ

関連する推奨事項:

vue でのイベントバスの非親子コンポーネント通信の詳細な説明

Vue.js コンポーネント通信におけるいくつかの姿勢の特別な分析

In - Vue.js コンポーネントとコンポーネント通信についての詳細なディスカッション

以上がVue 兄弟コンポーネント間の通信方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。