Vueコンポーネント間の通信の非常に詳細な要約

序文

コンポーネント通信は、特に Vue と React において、日常の開発プロセスにおいて重要な役割を果たします。この記事では、Vue のコンポーネント間の通信方法をいくつかまとめます。

小道具、$emit
$親、$子
$属性、$リスナー
提供する、注入する
イベントバス
ヴュークス
ローカルストレージ

1. Props、$emit一方向データフロー

父親.vue:

<テンプレート>
  <div>
    <div>私は父親です: <input type="button" value="father" /> 番号は: {{num}}</div>
    <son :num="num" @change="change"></son>
  </div>
</テンプレート>

<スクリプト>
「./son.vue」からsonをインポートします。
エクスポートデフォルト{
  名前:「父」
  コンポーネント:
    息子、
  },
  データ（） {
    戻る {
      番号: 1,
    };
  },
  方法:{
    変更(値){
      this.num = 値
    }
  }
};
</スクリプト>

息子.vue:

<テンプレート>
  <div>私は息子です: <input type="button" value="son" @click="change"/>番号は: {{num}}</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前:「アプリ」、
  コンポーネント: {},
  小道具: {
    番号: {
      デフォルト: 0,
    },
  },
  作成された() {},
  メソッド: {
    変化（）{
      // this.num = 2 props 通信は一方向のデータフローです。ここで親コンポーネントから渡された num を直接変更するとエラーが発生します。 // $emit を使用して変更イベントをトリガーできます。親コンポーネントは変更イベントをバインドします this.$emit('change', 2)
    }
  },
};
</スクリプト>

上記のシナリオでは、子コンポーネントの変更イベントは親コンポーネントの値を変更するだけです。これを記述する方法はいくつかあります。

1. 親コンポーネントは矢印関数を使用して子コンポーネントにイベントをバインドします。

父親：
<son :num="num" @change="val => num = val"></son>

息子：
これを$emit('change', 2)します

2.update:numと.sync

父親：

<son :num.sync="num"></son>

息子：

this.$emit('update:num', 2) //updateは規定の書き方であり、変更できません

3.vモデル

まず、プロパティとバインドされたイベントを変更します。

父: <son :value="num" @input="val => num = val"></son> 息子: this.$emit('input', 2) 
使用可能な v-model の略語: <son v-model="num"></son>

2. $親、$子

$parentと$childrenはそれぞれのメソッドを直接呼び出して親コンポーネントと子コンポーネントのデータを変更することができます。

子コンポーネント内に直接: this.$parent.num = 2

親コンポーネントでは、$children は配列なので、どの子コンポーネントであるかはあまり直感的ではありません。$refs を使用すると、子コンポーネントを操作できます。

Vue は公式にはこの通信方法を推奨していません。 $parentと$children控えめに使用してください。これらの主な目的は、コンポーネントにアクセスするための緊急方法として機能することです。親子コンポーネント通信を実現するには、props と events を使用することをお勧めします。

3. $attrs、$listeners

$attrs は親コンポーネントから渡された属性を取得できます。

<div>私は息子です: <input type="button" value="son" @click="change"/>番号は: {{$attrs}}</div>

DOMノード:

$attrs は渡された属性を対応するタグに直接配置しますが、props はそうしません。これらの属性をタグから削除する場合は、inheritAttrs を使用できます。

props は $attrs よりも優先度が高いことに注意してください。つまり、props が存在する場合、$attrs は空のオブジェクトになります。

$attrs は、親コンポーネントをトランジットとして使用して、祖父母コンポーネントなどの複数のレベルのコンポーネント間で属性を渡すためによく使用されます。

父親：

<son v-bind="$attrs"></son>

$attrs はレベル間の属性転送に使用され、$listeners はレベル間のメソッド転送に使用されます。

grandFather.vue:

<テンプレート>
  <div>
    <div>私は祖父です: 番号は: {{nums}}</div>
    <父:nums="nums" @up="上" @down="下"></父>
  </div>
</テンプレート>

<スクリプト>
「./father.vue」から Father をインポートします。
エクスポートデフォルト{
  名前:「アプリ」、
  コンポーネント:
    父親、
  },
  データ（）{
    戻る {
      数字:0
    }
  },
  メソッド: {
    上（） {
      アラート('アップ')
    }, ダウン() { アラート('ダウン') },
  },
};
</スクリプト>

父親.vue:

<son v-bind="$attrs" v-on="$listeners"></son>

息子.vue:

<div>私は息子です: <input type="button" value="son" @click="$listeners.up"/></div>

4. 提供する、注入する

このオプションのペアは、コンポーネント階層の深さに関係なく、祖先コンポーネントがすべての子孫に依存関係を注入できるようにするために一緒に使用し、上流と下流の関係が確立されている限り常に有効にする必要があります。

provide オプションは、オブジェクトまたはオブジェクトを返す関数である必要があります。

挿入オプションは文字列の配列またはオブジェクトである必要があります。

アプリ：

...

エクスポートデフォルト{
  提供する（）{
    {vm: this} を返す
  },

...

息子：

...

エクスポートデフォルト{
  挿入: ['vm'], data(){}, mounted(){ console.log(this.vm) }

...

注意: provide および inject バインディングはリアクティブではありません。これは意図的なものでした。ただし、リスニング可能なオブジェクトを渡すと、そのオブジェクトのプロパティは引き続きリスニング可能になります。

inject によって注入された値は、「近接原則」に従って、コンポーネントに沿って上方向に検索されます。

提供と注入におけるデータフローは双方向です。

5. イベントバス

EventBus は、他のコンポーネントが使用するためにグローバルイベントを公開およびサブスクライブします。

main.js の場合:

Vue.prototype.$bus = 新しい Vue();

親.vue:

<テンプレート>
  <div>
    <息子1></息子1>
    <息子2></息子2>
  </div>
</テンプレート>

<スクリプト>
'./son1.vue' から son1 をインポートします。
'./son2.vue' から son2 をインポートします。
エクスポートデフォルト{
  名前: '親'、
  コンポーネント:
    息子1、
    息子2
  },
  作成された(){
     this.$bus.$on('busEvent',(v)=>{
      コンソールログ(v);
    })
  },
  beforeDestroy(){
    this.$bus.off('バスイベント')
  }
}
</スクリプト>

son1とson2にマウント:

息子1:マウント(){
  this.$bus.$emit('busEvent','son1哈哈')
}son2:mounted(){ this.$bus.$emit('busEvent', 'son2嘻嘻')}

結果を印刷:

eventBus を使用する際に注意すべき点が 3 つあります。1. $bus.on は create フックで使用する必要があります。mounted で使用すると、create フックから他のコンポーネントによって送信されたイベントを受信できない可能性があります。

2. $bus.emit はマウント時に使用され、create の $bus.on イベントバインディングが完了するのを待機します。

3. 公開されたサブスクライブされたイベントは、beforeDestory フックの $bus.off を使用して解放する必要があります。コンポーネントが破棄された後もリッスンし続ける必要はありません。

6. ヴュークス

vuex の状態管理を利用してコンポーネント通信を実現するため、vuex はより複雑なプロジェクト、頻繁なデータ共有、大量のデータに適しています。

ストア/index.js:

'vue' から Vue をインポートします
'vuex' から Vuex をインポートします

Vue.use(Vuex)

定数ストア = 新しい Vuex.Store({
  州： {
    ログイン: false
  },
  突然変異:
    ログイン状態 (状態、ログイン) {
      状態.isLogin = ログイン
    }
  }
})

デフォルトストアをエクスポート

アプリ.vue:

作成された(){
  this.$store.commit('loginState',true)//ログインステータスをtrueに設定する
},

息子.vue:

<テンプレート>
  <div>私は息子です: <input type="button" value="son" />ログイン ステータス: {{isLogin}}</div>
</テンプレート>

<スクリプト>
'vuex' から {mapState} をインポートします。
エクスポートデフォルト{
  名前:「息子」、
  計算:{
    ...mapState(['isLogin'])
  }
};
</スクリプト>

7. ローカルストレージ

localstorage はブラウザのローカルストレージであり、ブラウザ内に長期間保存されます。非常に大量のデータにこのメソッドを使用することはお勧めしません。

アプリ.vue

作成された(){
  localStorage.setItem('isLogin', true)
},

息子.vue:

計算:{
  ログイン(){
    localStorage.getItem('isLogin') を返します。
  }
}

これらは基本的に共通コンポーネント通信方法です。漏れや不足がある場合は、コメント欄にメッセージを残してください。

要約する

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

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