Comment trouver l'emplacement en vue (trois méthodes)

Vue est un framework JavaScript populaire largement utilisé pour créer des applications Web. Dans Vue, de nombreuses méthodes peuvent être utilisées pour trouver la position. Cet article présentera les trois principales méthodes de recherche d'emplacement dans Vue et leurs utilisations.

1. refs

Dans Vue, chaque composant peut avoir un attribut ref unique via lequel l'instance du composant est accessible. L'emplacement d'un composant peut être facilement trouvé à l'aide de l'attribut 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>

Dans l'exemple ci-dessus, nous pouvons accéder à l'instance du ChildComponent via l'attribut ref et accéder à son élément DOM en utilisant l'attribut $el. Cette méthode est très pratique, notamment lorsque vous devez effectuer certaines opérations DOM sur le composant enfant du composant parent.

Il convient de noter que lors de l'utilisation de refs, le composant doit avoir été rendu et l'élément DOM doit exister. Sinon, des erreurs non définies peuvent survenir.

2. this.$root.$el

La hiérarchie des composants Vue est généralement en forme d'arborescence, et chaque composant a une propriété parent pointant vers son composant parent jusqu'au composant racine (racine). Grâce à la propriété $root de l'instance du composant, nous pouvons accéder au composant racine de l'application Vue et utiliser sa propriété $el pour accéder à l'élément 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>

Dans l'exemple ci-dessus, nous pouvons utiliser $root.$el dans la méthode pour accéder à l'élément DOM et utiliser l'attribut offsetTop pour obtenir la position de l'élément dans le document. Cette méthode est très utile notamment lorsqu’il faut défiler d’un composant à un autre.

Il est à noter que lors de l'utilisation de $root.$el, l'élément doit exister dans le modèle du composant racine. Sinon, des erreurs non définies peuvent survenir.

3. calculé

Les propriétés calculées sont une autre fonctionnalité très utile de Vue. Les propriétés calculées nous permettent de calculer de nouvelles valeurs en fonction de l'état du composant. Les propriétés calculées elles-mêmes ne modifient aucune donnée, mais dépendent d'autres données et renvoient un nouveau résultat calculé.

<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>

Dans l'exemple ci-dessus, nous utilisons une propriété calculée (pageTitle) pour calculer le titre de la page. Lorsque l'attribut title change, l'attribut pageTitle sera automatiquement mis à jour.

Il est important de noter que l'utilisation de propriétés calculées est très utile pour gérer une logique simple. Toutefois, si une propriété calculée nécessite des calculs complexes, les performances peuvent être affectées. À ce stade, une meilleure approche consiste à utiliser un observateur.

Avec ces trois méthodes, nous pouvons facilement trouver l'emplacement dans le composant Vue et effectuer certaines opérations, comme accéder aux éléments DOM, faire défiler les fenêtres, etc. Bien que chaque méthode ait sa portée, différentes méthodes peuvent être utilisées dans des situations spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!