vueのイベントオブジェクトとは何ですか

Vue.js のイベント オブジェクトには、イベントに関するプロパティとメソッドが含まれており、イベント ハンドラー関数を通じてアクセスできます。これらのプロパティには、イベント タイプ、ターゲット要素、元のイベント オブジェクトが含まれます。イベント オブジェクトは、デフォルトの動作やイベントのバブリングを防ぐメソッドも提供します。さらに、detail 属性を介してデータをカスタム イベントに渡すことができるため、コンポーネント間で複雑な情報を伝播および受信できます。

#Vue のイベント オブジェクト

Vue.js のイベント オブジェクトは、さまざまなプロパティとイベントに関連するメソッド。要素がイベントを起動すると、Vue はイベント オブジェクトを作成し、それをイベント ハンドラーに渡します。

イベント オブジェクトのプロパティ

一般的なイベント オブジェクトのプロパティの一部を次に示します:

• type:イベントは次のとおりです。 「クリック」や「キーアップ」などのトリガータイプ。
• target: イベントをトリガーする要素。
• currentTarget: 現在イベントを処理している要素。
• event: 元のブラウザ イベント オブジェクト。
• 詳細: カスタム イベント データ。

イベント オブジェクトのメソッド

イベント オブジェクトは次のメソッドも提供します:

• preventDefault():ブラウザのデフォルトの動作をブロックします。
• stopPropagation(): イベントが祖先要素にバブルアップするのを防ぎます。
• stopImmediatePropagation(): イベントのバブリングと伝播を直ちに停止します。

イベント オブジェクトの使用

Vue でイベント オブジェクトを使用するには、イベント ハンドラー関数でアクセスできます。例:

<code><button @click="handleClick">点击我</button>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.type); // "click"
      console.log(event.target); // HTMLButtonElement
      event.preventDefault();
    }
  }
}
</script></code>

上記の例では、

handleClick 関数はパラメータとしてイベント オブジェクトを提供します。このオブジェクトを使用して、イベントのタイプ、ターゲット要素などの情報にアクセスできます。

カスタム イベント データ

detail 属性を通じてカスタム イベントにデータを渡すことができます。例:

<code><my-component @custom-event="handleEvent">
  <button @click="emitEvent">触发事件</button>
</my-component>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('custom-event', { message: '你好，世界！' });
    },
    handleEvent(event) {
      console.log(event.detail.message); // "你好，世界！"
    }
  }
}
</script></code>

これにより、イベントとともに任意のデータを伝播および受信できるようになります。

以上がvueのイベントオブジェクトとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。