Vue で無関係なコンポーネントにパラメータを渡す方法

Vue では、通常、コンポーネントは props 属性を介してデータを渡すことができますが、無関係なコンポーネント間でデータを渡す必要がある場合があります。

たとえば、あるコンポーネントから別のコンポーネントにデータを渡す必要がある場合でも、2 つのコンポーネントには接続がない可能性があります。この場合、Vue のイベント システムを使用して、親以外のコンポーネントと子コンポーネント間の通信を実装できます。具体的には、Vue の $on メソッドと $emit メソッドを使用してイベントを送受信できます。

$on メソッドは、現在のコンポーネントにカスタム イベントを登録するために使用されます。イベントがトリガーされると、現在のコンポーネントは対応する操作を実行できます。 $emit メソッドは、カスタム イベントをトリガーし、イベントをリッスンするすべてのコンポーネントに指定されたパラメーターを渡すために使用されます。

例は次のとおりです:

<!-- 组件A -->
<template>
  <div>
    <!-- 触发事件 -->
    <button @click="sendDataToB">传递数据给组件B</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToB() {
      // 发送事件
      this.$emit('sendData', '这是来自组件A的数据')
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <!-- 监听事件并接收数据 -->
    <div>收到的数据：{{ receivedData }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedData: ''
    }
  },
  mounted() {
    // 监听事件
    this.$on('sendData', (data) => {
      this.receivedData = data
    })
  }
}
</script>

この例では、「sendData」という名前のカスタム イベントをコンポーネント A に登録し、$emit メソッドを使用してイベントをトリガーしました。 $emit メソッドは、文字列「これはコンポーネント A からのデータです」をパラメータとして、イベントをリッスンしているすべてのコンポーネントに渡します。

コンポーネント B では、マウントされたライフサイクル フックの $on メソッドを使用してイベント「sendData」をリッスンし、応答関数でコンポーネント B のデータ受信データを更新します。この時点で、コンポーネント B はコンポーネント A から渡されたデータを受信できるようになります。

親以外のコンポーネントと子コンポーネント間の通信は、コンポーネント間で人形が無限にネストされてコードの保守が困難になるのを避けるために、特殊なイベント システムを使用して実装する必要があることに注意してください。したがって、実際の開発では、コンポーネント間の通信を親子コンポーネントに限定するように努める必要があります。

以上がVue で無関係なコンポーネントにパラメータを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。