4 つの Vue コンポーネント通信方法の例を共有する

この記事では主に、親コンポーネントと子コンポーネント間の通信、親コンポーネントと子コンポーネント以外のコンポーネント間の EventBus 通信、ローカル キャッシュを使用したコンポーネント通信、および Vuex 通信の 4 つの Vue コンポーネント通信方法について説明します。皆さんのお役に立てれば幸いです。

最初の通信方法: 親子コンポーネント通信

親コンポーネントは子コンポーネントにデータを渡します

• 親コンポーネントは合計4つのことを行う必要があります

• 1.import Son from ' ./son.js' サブコンポーネントの Son を導入します

• 2. すべてのサブコンポーネント名をコンポーネントに登録します: {"son"}

• 3. 親コンポーネントのテンプレートにサブコンポーネントを適用します。 ,

• 4. サブコンポーネントにデータを渡す必要がある場合は、

 // 1.引入子组件 
     import counter from './counter'     import son from './son'

// 2.在ccmponents里注册子组件    components : {
        counter,
        son
    },

• サブコンポーネントが実行する必要があるのは 1 つだけです

• 1. props を使用してデータを受け取り、データを直接使用できます

• 2。変更されました。変更する必要がある場合は、計算属性を使用するか、サブモジュール DATA

// 3.在template里使用子组件   <son></son>

E

 // 4.如果需要传递数据,也是在templete里写
 
   <counter :num="number"></counter>

E

モジュールの変数にデータを代入して、親コンポーネントにデータを渡すことができます。テンプレート内のイベント

• サブコンポーネントのイベントトリガーをリッスンする関数をメソッドに記述します

データ変更後は、$emit を使用してトリガー

   // 1.用Props接受数据      props: [               'num'
           ],

2 番目の通信方法: eventBus

eventBus この通信方法は、親コンポーネントと子コンポーネント以外のコンポーネント間の通信を目的としていますが、その原理はやはりイベントのトリガーと監視です。

• ただし、これらは親子コンポーネントではないため、それらを接続するための中間コンポーネントが必要です。

ルートコンポーネントである#appコンポーネントに、すべてのコンポーネントからアクセスできるコンポーネントを定義して使用しています
• 具体的な使い方は以下の通りです
  eventBusを使ってデータを転送するには、合計3つを行う必要があります。

1. Bus 属性をアプリ コンポーネントに追加します (すべてのコンポーネントが this.$root.Bus を通じてアクセスできるように、ファイルを導入する必要はありません)

2. 、 this.$root.Bus .$emit はイベント

をトリガーします。 3. コンポーネント 2 では、 this.$root.Bus.$on がイベント

• をリッスンします

  // 2.如果需要修改得到的数据,可以这样写
     props: [            'num'
          ],  data () {        return {
              number : this.num
          }
      },

  // 1. 在templete里应用子组件时,定义事件changeNumber
        <counter :num="number"                 @changeNumber="changeNumber"
        >
        </counter>

  3 番目の通信方法: localStorage またはsessionStorage

このような通信の比較 シンプルですが、データやステータスが乱雑で保守が難しいという欠点があります。

• window.localStorage.getItem(key) を通じてデータを取得します

  window.localStorage.setItem(key, value) を通じてデータを保存します
• データ形式の変換には JSON.parse() / JSON.stringify() を使用するように注意してください。
  4番目の通信方法: Vuexの使用

Vuexはより複雑なので、別の記事を書くことができます

関連する推奨事項:

Vueコンポーネント開発経験の共有

Vueコンポーネントの親子通信の詳細な説明

権限管理モジュールでの Vue コンポーネント インスタンスの動的ロードの詳細な説明

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