Bagaimana untuk mendapatkan objek elemen dalam vue

Dalam Vue, kita mungkin perlu mendapatkan objek DOM bagi elemen tertentu untuk melaksanakan beberapa operasi, seperti mengubah suai gaya CSS atau menambah pendengar acara. Artikel ini akan memperkenalkan cara mendapatkan objek elemen dalam Vue.

1. Gunakan atribut ref untuk mendapatkan objek elemen

Vue menyediakan atribut khas ref yang boleh digunakan untuk mendapatkan objek elemen. Dalam templat, kita boleh menambah atribut ref pada elemen:

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

Dalam contoh Vue, kita boleh menggunakan atribut $refs untuk mengakses objek elemen:

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

Dalam contoh ini , apabila pengguna mengklik butang, kami menukar warna latar belakang butang kepada merah. Anda boleh mendapatkan objek DOM butang melalui this.$refs.myButton dan kemudian mengubah suainya.

Perhatikan bahawa $refs ialah objek, dengan nilai atribut ref sebagai kunci dan objek elemen yang sepadan sebagai nilai.

2. Dapatkan objek elemen melalui parameter acara

Dalam fungsi pemprosesan acara Vue, parameter acara dihantar secara automatik ke fungsi panggil balik. Parameter peristiwa ini mengandungi maklumat tentang peristiwa semasa, termasuk objek elemen yang mencetuskan peristiwa.

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

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

Dalam contoh ini, kami memperoleh objek elemen yang mencetuskan acara klik melalui parameter acara klik event, dan kemudian mengubah suai warna latar belakangnya.

Perhatikan bahawa event.target menunjuk kepada objek elemen yang mencetuskan peristiwa pada masa ini, bukan objek elemen dalam templat definisi.

3. Gunakan atribut $el untuk mendapatkan objek elemen akar komponen

Apabila kita menggunakan komponen Vue, komponen itu sendiri juga merupakan objek yang serupa dengan elemen. Elemen akar selepas pemaparan komponen boleh diperolehi melalui atribut $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,
  }
}

Dalam contoh ini, kami memperkenalkan komponen tersuai MyComponent dan menggunakannya dalam contoh Vue. Dapatkan rujukan contoh komponen ini melalui atribut refs, gunakan atribut $el dalam fungsi kitaran hayat yang dipasang untuk mendapatkan objek elemen akar selepas komponen itu diberikan dan beroperasi padanya.

Perhatikan bahawa objek elemen akar komponen hanya boleh diperolehi selepas komponen dipaparkan, jadi ia perlu dikendalikan dalam fungsi kitaran hayat yang dipasang.

Ringkasan

Dalam Vue, terdapat banyak cara untuk mendapatkan objek elemen:

• Gunakan atribut ref untuk mendapatkan objek elemen dan mengaksesnya melalui $refs atribut.
• Dalam fungsi pengendalian acara, dapatkan objek elemen yang mencetuskan acara melalui parameter acara.
• Dalam komponen Vue, gunakan atribut $el untuk mendapatkan objek elemen akar selepas komponen itu dipaparkan.

Kaedah ini sangat mudah dan mudah difahami serta boleh dipilih mengikut situasi tertentu.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan objek elemen dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!