Vue.jsコンポーネントの通信

Vue.jsアプリケーションでコンポーネントを通信させる方法。


Vueのコンポーネントはさまざまな方法で通信できます。

小道具

最初の方法は小道具

親は、コンポーネント宣言に引数を追加することにより、データを「受け渡し」ます。

<template>
  <div>
    <Car color="green" />
  </div>
</template>

<script> import Car from ‘./components/Car’

export default { name: ‘App’, components: { Car } } </script>

小道具は一方向です:親から子へ。親が小道具を変更するたびに、新しい値が子に送信されて再レンダリングされます。

逆は当てはまりません。子コンポーネント内の小道具を変更しないでください。

イベントを使用して子供から親に通信する

イベントを使用すると、子供から親までのコミュニケーションが可能になります。

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething')
    }
  }
}
</script>

親はこれを使用してこれを傍受できますv-onテンプレートにコンポーネントを含める場合のディレクティブ:

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script> export default { name: ‘App’, methods: { handleClickInParent: function() { //… } } } </script>

もちろん、パラメータを渡すことができます。

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$emit('clickedSomething', param1, param2)
    }
  }
}
</script>

親からそれらを取得します。

<template>
  <div>
    <Car v-on:clickedSomething="handleClickInParent" />
    <!-- or -->
    <Car @clickedSomething="handleClickInParent" />
  </div>
</template>

<script> export default { name: ‘App’, methods: { handleClickInParent: function(param1, param2) { //… } } } </script>

イベントバスを使用して任意のコンポーネント間で通信する

イベントを使用すると、子供と親の関係に限定されません。

あなたはいわゆるを使用することができますイベントバス

上記で使用しましたthis.$emitコンポーネントインスタンスでイベントを発行します。

代わりにできることは、より一般的にアクセス可能なコンポーネントでイベントを発行することです。

this.$rootこれには、ルートコンポーネントであるが一般的に使用されます。

このジョブ専用のVueコンポーネントを作成し、必要な場所にインポートすることもできます。

<script>
export default {
  name: 'Car',
  methods: {
    handleClick: function() {
      this.$root.$emit('clickedSomething')
    }
  }
}
</script>

他のコンポーネントはこのイベントをリッスンできます。あなたはでそうすることができますmounted折り返し電話:

<script>
export default {
  name: 'App',
  mounted() {
    this.$root.$on('clickedSomething', () => {
      //...
    })
  }
}
</script>

代替案

これは、Vueが箱から出して提供するものです。

あなたがこれを超えたとき、あなたは調べることができますVuexまたは他のサードパーティライブラリ。

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル: