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

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

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

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

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

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

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

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

<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 サイトの他の関連記事を参照してください。