Bagaimana untuk mencari lokasi dalam vue (tiga kaedah)

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk membina aplikasi web. Dalam Vue, terdapat banyak kaedah yang boleh digunakan untuk mencari kedudukan. Artikel ini akan memperkenalkan tiga kaedah carian lokasi utama dalam Vue dan kegunaannya.

1. Rujukan

Dalam Vue, setiap komponen boleh mempunyai atribut ref unik yang melaluinya contoh komponen boleh diakses. Lokasi komponen boleh didapati dengan mudah menggunakan atribut ref.

<template>
  <div>
    <child-component ref="myChildComponent"></child-component>
  </div>
</template>
<script>
  import ChildComponent from './components/ChildComponent.vue'

  export default {
    components: { ChildComponent },
    mounted() {
      const myChildComponent = this.$refs.myChildComponent
      console.log(myChildComponent.$el)
    }
  }
</script>

Dalam contoh di atas, kita boleh mengakses contoh komponen anak (ChildComponent) melalui atribut ref dan menggunakan atribut $el untuk mengakses elemen DOMnya. Kaedah ini sangat mudah, terutamanya apabila anda perlu melakukan beberapa operasi DOM pada komponen anak dalam komponen induk.

Perlu diambil perhatian bahawa apabila menggunakan rujukan, komponen mesti telah diberikan dan elemen DOM mesti wujud. Jika tidak, ralat yang tidak ditentukan mungkin berlaku.

2. ini.$root.$el

Hierarki komponen Vue biasanya berbentuk pokok dan setiap komponen mempunyai sifat induk yang menunjuk kepada komponen induknya sehingga akar (akar) komponen. Melalui sifat $root bagi contoh komponen, kami boleh mengakses komponen akar aplikasi Vue dan menggunakan sifat $elnya untuk mengakses elemen DOM.

<template>
  <div>
    <button @click="scrollToFooter">Go to Footer</button>
    <div class="content"></div>
    <footer ref="myFooter"></footer>
  </div>
</template>
<script>
  export default {
    methods: {
      scrollToFooter() {
        const el = this.$root.$el.querySelector('.my-footer')
        window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })
      }
    }
  }
</script>

Dalam contoh di atas, kita boleh menggunakan $root.$el dalam kaedah untuk mengakses elemen DOM dan menggunakan atribut offsetTop untuk mendapatkan kedudukan elemen dalam dokumen. Kaedah ini sangat berguna, terutamanya apabila anda perlu menatal dari satu komponen ke komponen yang lain.

Perlu diambil perhatian bahawa apabila menggunakan $root.$el, elemen mesti wujud dalam templat komponen akar. Jika tidak, ralat yang tidak ditentukan mungkin berlaku.

3. dikira

Sifat yang dikira ialah satu lagi ciri yang sangat berguna dalam Vue. Sifat yang dikira membolehkan kami mengira nilai baharu berdasarkan keadaan komponen. Sifat yang dikira sendiri tidak mengubah suai sebarang data, tetapi bergantung pada data lain dan mengembalikan hasil pengiraan baharu.

<template>
  <div>
    <h1>{{ pageTitle }}</h1>
    <div class="content"></div>
    <footer></footer>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: 'My App'
      }
    },
    computed: {
      pageTitle() {
        return `${this.title} - My App`
      }
    }
  }
</script>

Dalam contoh di atas, kami menggunakan sifat yang dikira (pageTitle) untuk mengira tajuk halaman. Apabila atribut tajuk berubah, atribut pageTitle akan dikemas kini secara automatik.

Adalah penting untuk ambil perhatian bahawa menggunakan sifat yang dikira sangat berguna untuk mengendalikan logik mudah. Walau bagaimanapun, jika harta yang dikira memerlukan pengiraan yang rumit, prestasi mungkin terjejas. Pada ketika ini, pendekatan yang lebih baik ialah menggunakan pemerhati.

Dengan tiga kaedah ini, kami boleh mencari lokasi dalam komponen Vue dengan mudah dan melaksanakan beberapa operasi, seperti mengakses elemen DOM, tetingkap menatal, dsb. Walaupun setiap kaedah mempunyai skopnya, kaedah yang berbeza mungkin digunakan dalam situasi tertentu.

Atas ialah kandungan terperinci Bagaimana untuk mencari lokasi dalam vue (tiga kaedah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!