Riješeno: nativescript vue dobiti native iz ref

Posljednje ažuriranje: 09/21/2023
Autor: JavaScript SourceTrail

Naravno, evo strukture ukratko:

Nativescript Vue je moćan okvir koji omogućava programerima da koriste Vue.js za izradu izvornih mobilnih aplikacija. Okvir omogućava pristup izvornim API-jima direktno iz njihovih Vue komponenti, što može biti vrlo korisno u mnogim scenarijima.

Jednom konkretnom slučaju korištenja pristupa se izvornom elementu iz ref. Evo kako se to može postići:

<template>
  <Page>
    <Button ref="myButton" text="Click Me!" />
  </Page>
</template>

<script>
export default {
  methods: {
    getNativeButton() {
      return this.$refs.myButton.nativeView;
    },
  },
  mounted() {
    console.log(this.getNativeButton());
  },
};
</script>

Vital Components

U gore navedenom isječku koda imamo komponentu Vue. Unutar ove komponente nalazi se element gumba koji ima ref atribut. U Vue.js, ref atribut se koristi za registraciju reference na element ili podređenu komponentu. Ovo se zatim može koristiti u metodama komponente za manipulaciju elementom ili podređenom komponentom.

Razumijevanje Kodeksa

Metoda `getNativeButton()` je funkcija koja vraća izvorni prikaz gumba. Pristup izvornom prikazu pruža nam niz metoda i svojstava s kojima možemo raditi, a koji su specifični za platformu (iOS ili Android). Na ovaj način možemo imati potpunu kontrolu nad dugmetom, direktno iz naše Vue komponente.

U zakačici životnog ciklusa `mounted()`, poziva se metoda `getNativeButton()`. Ovo će zabilježiti izvorni prikaz gumba na konzoli kada se komponenta montira.

Važno je napomenuti da ovaj kod treba biti umotan u `` element. To je zato što će dugme morati da bude deo stranice da bi pristupilo svom izvornom elementu.

Ostala razmatranja i slične funkcije

Imajte na umu da je uvijek važno očistiti svoje reference kada su komponente uništene – ako to ne učinite može dovesti do curenja memorije. Da bi se osiguralo pravilno čišćenje, može se koristiti `beforeDestroy()` udica životnog ciklusa u Vue.js.

Takođe imamo svojstvo `$el` u Vue-u koje vam daje direktan pristup DOM elementu koji predstavlja Vue instanca. Ali za razliku od `$refs`, `$el` neće mnogo pomoći u NativeScript-Vue, jer ne postoji stvarni DOM pretraživača.

Nativescript-Vue i njegova mogućnost pristupa izvornim komponentama direktno iz Vue.js znači da smo u mogućnosti da iskoristimo punu snagu matičnih mobilnih platformi, dok i dalje održavamo čist i deklarativni pristup izgradnji korisničkih interfejsa.

Slični postovi: