vueで要素オブジェクトを取得する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-05-11 09:56:06

オリジナル

3127 人が閲覧しました

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 属性を使用して、コンポーネントのレンダリング後にルート要素オブジェクトを取得し、それを操作します。

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