Apakah yang perlu saya lakukan jika uniapp tidak menyokong perkara ini.$refs?

Sebagai pembangun, jika anda sedang membangun menggunakan rangka kerja uniapp, anda mungkin menghadapi beberapa masalah. Salah satunya ialah uniapp tidak menyokong penggunaan ini.$refs sintaks. Artikel ini akan meneroka masalah ini dan cara menyelesaikannya.

Pertama sekali, kita perlu memahami perkara ini.$refs dan fungsinya. Dalam rangka kerja Vue.js, this.$refs digunakan untuk mendapatkan rujukan kepada subkomponen atau elemen DOM. Gunakan ini.$refs untuk mengakses dan mengubah suai komponen dan elemen DOM dengan mudah. Walau bagaimanapun, memandangkan rangka kerja uniapp menggunakan model pembangunan berdasarkan sambungan program kecil, ini.$refs tidak disokong dalam uniapp.

Jadi, bagaimana untuk mendapatkan rujukan subkomponen atau elemen DOM dalam uniapp? Jawapannya ialah menggunakan API yang disediakan oleh uniapp untuk beroperasi. uniapp menyediakan banyak API, seperti pengesahan kebenaran univerify, permintaan rangkaian uni.request, kotak gesaan uni.showToast, dsb. Untuk mendapatkan rujukan kepada subkomponen atau elemen DOM, kami boleh menggunakan API yang disediakan oleh uni-app - uni.createSelectorQuery().

uni.createSelectorQuery() menyediakan kaedah untuk memilih nod pada halaman dan mengembalikan objek pertanyaan. Untuk objek pertanyaan ini, kami boleh menggunakan kaedah yang disediakannya, seperti pilih, pilihSemua, boundingClientRect, dll. untuk mendapatkan maklumat nod yang kami perlukan. Mari lihat contoh:

<template>
  <view>
    <button @click="handleClick">获取节点信息</button>
    <view ref="myView">{{ message }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uniapp!',
      myViewRect: null
    }
  },
  methods: {
    handleClick() {
      uni.createSelectorQuery().select('.myView').boundingClientRect(rect => {
        this.myViewRect = rect
        console.log(this.myViewRect)
      }).exec()
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan teg pandangan, menetapkan atribut ref kepada teg pandangan dan menetapkan atribut bernama myView. Dalam contoh ini, kami memperoleh maklumat nod myView melalui sifat this.myViewRect. Apabila butang diklik, kami menggunakan uni.createSelectorQuery(), dan menggunakan kaedah .select() untuk memilih nod yang kami perlukan, kemudian gunakan kaedah .boundingClientRect() untuk mendapatkan maklumat nod ini, dan akhirnya gunakan . exec() kaedah untuk melaksanakan operasi ini. Dalam fungsi panggil balik, kami memperoleh maklumat nod myView, memberikannya kepada sifat myViewRect, dan kemudian mencetak harta ini pada konsol.

Ringkasnya, walaupun rangka kerja uniapp tidak menyokong penggunaan ini.$refs sintaks, kami masih boleh menggunakan kaedah lain untuk mendapatkan rujukan kepada subkomponen atau elemen DOM. Saya percaya bahawa selepas menguasai API uni.createSelectorQuery(), anda boleh mendapatkan maklumat nod yang anda perlukan untuk mencapai keperluan perniagaan anda dengan mudah.

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika uniapp tidak menyokong perkara ini.$refs?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!