Explication détaillée de l'utilisation des étapes de référence dans vue2

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation de ref dans vue2. Quelles sont les précautions pour utiliser ref dans vue2. Voici des cas pratiques, jetons un coup d'œil.

Cet article présente l'utilisation spécifique de ref dans vue2 et le partage avec tout le monde. Les détails sont les suivants.

1. Définissons d’abord deux composants

partie html

  <p id="app">
   <navbar ></navbar>
   <pagefooter ></pagefooter>
  </p>

Partie js

  Vue.component('navbar',{
    template:'<p>{{navs}}</p>',
    data:function () {
     return {
      navs:1
     }
    }
   });
  Vue.component('pagefooter',{
    template:'<p>{{footer}}</p>',
    data:function () {
     return {
      footer:11
     }
    }
   });

Comment accéder directement aux navigations de la barre de navigation et à la valeur du pied de page du pied de page ici ? Cela utilise ref

2. Utilisation de la réf

Modifier le composant

  <p id="app">
   <navbar ref="navbar"></navbar>
   <pagefooter ref="pagefooter"></pagefooter>
  </p>
   new Vue({
    el:'#app',
    created:function(){
     
    },
    mounted:function () {
     this.$refs.navbar.navs=222
     //ready,
     //这里怎么直接访问navbar的navs和pagefooter的footer值呢，
      console.log(this.$refs.navbar.navs);
      console.log(this.$refs.pagefooter.footer);
    }
   })

Si vous utilisez simplement un tag normal

<p ref="demo"></p>

Son rôle est :

document.querySelector('[ref=demo]');

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!