v-on:click.native を使用して Vue でネイティブ イベントをバインドする方法

Vue は、応答性の高いユーザー インターフェイスを迅速に構築でき、Web サイト開発に大きな助けとなる人気の JavaScript フレームワークです。 Vue では、ユーザーの操作に応答するためにイベント バインディングを使用する必要があることがよくあります。ネイティブ イベントをバインドする必要がある場合は、v-on:click.native を使用できます。

v-on:click.native は Vue によって提供されるディレクティブです。テンプレートで使用すると、ネイティブ クリック イベントを現在の要素にバインドするように Vue に指示します。このコマンドは、キーアップ、キーダウンなどの他のイベントにも使用できます。これは、Vue でネイティブ JavaScript イベントを使用してユーザー操作を処理できることを意味します。

v-on:click.native を使用する場合は、いくつかの詳細に注意する必要があります。まず、Vue コンポーネントのテンプレートで次の命令を使用する必要があります。

<template>
  <div v-on:click.native="handleClick">点击我</div>
</template>

ここでは、クリック イベントを div 要素にバインドし、イベント ハンドラー関数を handleClick として指定します。 v-on:click.native は、Vue コンポーネントのカスタム要素ではなく、ネイティブ DOM 要素にバインドされていることに注意してください。

2 番目に、通常どおり、操作を実行するために呼び出される Vue メソッドを定義できます。

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('点击事件触发：', event);
    }
  }
}
</script>

ここでは、イベント パラメータを受け取る handleClick という名前のメソッドを定義します。メソッドでイベント オブジェクトにアクセスして、イベントの詳細を取得できます。この例では、console.log() 関数を使用して、イベントをトリガーしたメッセージをログに記録します。

最後に、重要な概念を理解する必要があります。v-on:click.native は、Vue コンポーネント テンプレートの要素ではなく、Vue コンポーネントのルート要素にバインドされています。これは、v-on:click.native をレンダリングされたサブ要素にバインドする必要がある場合、このサブ要素を vue インスタンスのルート要素として設定する必要があることを意味します。以下に示すように:

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

export default {
  components: {
    ChildComponent,
  },
  mounted() {
    const child = new Vue({
      el: this.$refs.childRef,
      methods: {
        handleClick(event) {
          console.log('点击事件触发：', event);
        }
      }
    });

    this.$refs.childRef.child = child;
  }
}
</script>

<template>
  <div>
    <ChildComponent ref="childRef">
      <div v-on:click.native="child.handleClick">点击我</div>
    </ChildComponent>
  </div>
</template>

この例では、子コンポーネント ChildComponent を使用し、v-on:click.native イベントを子コンポーネントの dom 要素にバインドします。 $refs を使用してサブコンポーネントを参照し、それをルート要素として設定し、イベント ハンドラーを vue インスタンスにバインドします。

概要

v-on:click.native ディレクティブを使用すると、Vue でネイティブ JavaScript イベントを使用してユーザー操作に応答できるようになります。このディレクティブは、カスタム Vue コンポーネント要素ではなく、Vue コンポーネントのルート要素にバインドされることに注意してください。これを使用する場合は、methods 属性を使用してメソッドを定義する必要があります。このメソッドでは、イベント オブジェクトにアクセスしてイベントの詳細を取得できます。

以上がv-on:click.native を使用して Vue でネイティブ イベントをバインドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。