Vue カスタム イベントの使用法と一般的なシナリオ

Vue カスタム イベントの使用法と一般的なシナリオ

Vue.js は、ユーザー インターフェイスを構築するための人気のある JavaScript フレームワークです。 Vue では、カスタム イベントを通じてコン​​ポーネント間の通信を実装できます。カスタム イベントは Vue の非常に便利な機能の 1 つであり、異なるコンポーネント間でデータを渡し、特定の動作をトリガーできるようになります。この記事では、Vue でのカスタム イベントの使用法と一般的なシナリオを紹介し、具体的なコード例を示します。

1. カスタム イベントの基本的な使用法

Vue では、$emit メソッドを使用してカスタム イベントをトリガーできます。 $emit メソッドは 2 つのパラメーターを受け取ります。最初のパラメーターはトリガーされるイベントの名前で、2 番目のパラメーターは渡されるデータです。カスタム イベントを受信するコンポーネントは、v-on ディレクティブを使用してイベントをリッスンし、イベントがトリガーされたときに関連ロジックを実行する必要があります。

次の簡単な例は、親コンポーネントでカスタム イベントをトリガーし、子コンポーネントでイベントを受信して​​処理する方法を示しています。

<!-- 父组件 -->
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    triggerEvent() {
      this.$emit('custom-event', 'Hello, world!');
    },
    handleEvent(data) {
      console.log(data); // 输出：Hello, world!
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1 id="子组件">子组件</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$emit('custom-event', 'Hello, world!');
  }
}
</script>

上記の例では、 when " Whenイベント ボタンがトリガーされると、親コンポーネントがカスタム イベントをトリガーし、文字列「Hello, world!」をデータとして渡します。サブコンポーネントは、v-on ディレクティブを通じてカスタム イベントをリッスンし、受信したデータを handleEvent メソッドで出力します。

2. カスタム イベントの一般的なシナリオ

1. 親コンポーネントと子コンポーネント間の通信

カスタム イベントは、親コンポーネントと子コンポーネントの間でデータと実装を転送します。とても便利。親コンポーネントは、カスタム イベントを通じて子コンポーネントにデータを渡し、子コンポーネントによってトリガーされるカスタム イベントをリッスンして、子コンポーネントのデータを取得できます。

2. 兄弟コンポーネント間の通信

2 つのコンポーネントに親子関係がないが、通信する必要がある場合は、Vue のイベント バスを使用してそれを実現できます。イベント バスは、異なるコンポーネント間でイベントを共有するために使用される空の Vue インスタンスです。カスタム イベントは、$emit メソッドと $vnode.$on メソッドを通じて、さまざまなコンポーネント間でトリガーおよび受信できます。

イベント バスを使用して兄弟コンポーネント間で通信する方法を示す例を次に示します。

<!-- 组件A -->
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  methods: {
    triggerEvent() {
      eventBus.$emit('custom-event', 'Hello, world!');
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <h1 id="组件B">组件B</h1>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  mounted() {
    eventBus.$on('custom-event', data => {
      console.log(data); // 输出：Hello, world!
    })
  }
}
</script>

<!-- eventBus.js -->
import Vue from 'vue';

const eventBus = new Vue();

export default eventBus;

上の例では、コンポーネント A がイベント バスを通じてカスタム イベントをトリガーし、データが合格した。コンポーネント B は、イベント バスを通じてカスタム イベントをリッスンし、コールバック関数でデータを取得します。

3. クロスレベル コンポーネント間の通信

Vue は、クロスレベル コンポーネント間の通信を実現するための Provide/Inject API を提供します。親コンポーネントで Provide を使用してデータを提供し、子孫コンポーネントで Inject を使用してデータを注入することにより、任意のレベルのコンポーネント間の通信が実現されます。

次の例は、provide と inject を使用してクロスレベル コンポーネント間の通信を実現する方法を示しています。

<!-- 父组件 -->
<template>
  <div>
    <p>父组件提供的数据：{{ data }}</p>
    <grand-child-component></grand-child-component>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      data: 'Hello, world!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>子组件注入的数据：{{ injectedData }}</p>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}
</script>

<!-- 孙子组件 -->
<template>
  <div>
    <p>孙子组件注入的数据：{{ injectedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}
</script>

上の例では、親コンポーネントはデータ「Hello」を介して提供します。 Provide , world!」の場合、子コンポーネントと孫コンポーネントには、それぞれ inject を通じてデータが注入され、テンプレートで使用されます。

概要

カスタム イベントは、コンポーネント間の通信を簡単に実現できる Vue の非常に便利な機能です。 Vue では、$emit メソッドを使用してカスタム イベントをトリガーし、v-on ディレクティブを通じてイベントをリッスンできます。カスタム イベントは、親子コンポーネント、兄弟コンポーネント、およびクロスレベル コンポーネント間の通信に適しています。この記事で提供されている多数のサンプル コードが、Vue のカスタム イベントの使用法と一般的なシナリオをより深く理解するのに役立つことを願っています。

以上がVue カスタム イベントの使用法と一般的なシナリオの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。