vueで要素オブジェクトを取得する方法

Vue では、CSS スタイルの変更やイベント リスナーの追加などの操作を実行するために、特定の要素の DOM オブジェクトを取得する必要がある場合があります。この記事ではVueで要素オブジェクトを取得する方法を紹介します。

1. ref 属性を使用して要素オブジェクトを取得します

Vue は、要素オブジェクトを取得するために使用できる特別な属性 ref を提供します。テンプレートでは、要素に ref 属性を追加できます:

<template>
  <div>
    <button ref="myButton" @click="handleClick">Click me</button>
  </div>
</template>

Vue インスタンスでは、$refs 属性を使用してこの要素オブジェクトにアクセスできます:

export default {
  methods: {
    handleClick() {
      this.$refs.myButton.style.backgroundColor = 'red';
    }
  }
}

この例では、ユーザーがボタンをクリックすると、ボタンの背景色が赤に変更されます。 this.$refs.myButton を通じて、ボタンの DOM オブジェクトを取得し、それを変更できます。

$refs はオブジェクトであり、ref 属性の値がキー、対応する要素オブジェクトが値であることに注意してください。

2. イベント パラメーターを通じて要素オブジェクトを取得する

Vue のイベント処理関数では、イベント パラメーターが自動的にコールバック関数に渡されます。このイベント パラメーターには、イベントをトリガーした要素オブジェクトなど、現在のイベントに関する情報が含まれます。

<template>
  <div>
    <button @click="handleClick">Click me</button>
  </div>
</template>

export default {
  methods: {
    handleClick(event) {
      event.target.style.backgroundColor = 'red';
    }
  }
}

この例では、クリック イベント event のパラメーターを通じてクリック イベントをトリガーした要素オブジェクトを取得し、その背景色を変更します。

event.target は、定義テンプレート内の要素オブジェクトではなく、現在イベントをトリガーしている要素オブジェクトを指していることに注意してください。

3. $el 属性を使用してコンポーネントのルート要素オブジェクトを取得します

Vue コンポーネントを使用する場合、コンポーネント自体も要素と同様のオブジェクトです。コンポーネントのレンダリング後のルート要素は、$el 属性を通じて取得できます。

<template>
  <div>
    <my-component ref="myComponent"></my-component>
  </div>
</template>

import MyComponent from './MyComponent.vue';

export default {
  mounted() {
    const root = this.$refs.myComponent.$el;
    root.style.backgroundColor = 'red';
  },
  components: {
    MyComponent,
  }
}

この例では、カスタム コンポーネント MyComponent を導入し、それを Vue インスタンスで使用しました。 refs 属性を通じてこのコンポーネント インスタンスへの参照を取得し、マウントされたライフ サイクル関数の $el 属性を使用して、コンポーネントのレンダリング後にルート要素オブジェクトを取得し、それを操作します。

コンポーネントのルート要素オブジェクトは、コンポーネントがレンダリングされた後にのみ取得できるため、マウントされたライフサイクル関数で操作する必要があることに注意してください。

概要

Vue では、要素オブジェクトを取得する方法が多数あります。

• ref 属性を使用して要素オブジェクトを取得します。 $refs属性アクセスを介して。
• イベント処理関数では、イベント パラメーターを通じてイベントをトリガーした要素オブジェクトを取得します。
• Vue コンポーネントでは、$el プロパティを使用して、コンポーネントのレンダリング後にルート要素オブジェクトを取得します。

これらの方法は非常にシンプルで理解しやすく、特定の状況に応じて選択できます。

以上がvueで要素オブジェクトを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。