Comment utiliser la référence dans vue2

Cet article présente principalement l'utilisation spécifique de ref dans vue2. L'éditeur pense que c'est plutôt bien. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

1. Définissons d'abord deux composants

partie html

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

partie js

  Vue.component('navbar',{
    template:&#39;<p>{{navs}}</p>&#39;,
    data:function () {
     return {
      navs:1
     }
    }
   });
  Vue.component(&#39;pagefooter&#39;,{
    template:&#39;<p>{{footer}}</p>&#39;,
    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 ? Ceci utilise ref

2 Utilisation de ref

Modifier les composants

  <p id="app">
   <navbar ref="navbar"></navbar>
   <pagefooter ref="pagefooter"></pagefooter>
  </p>
   new Vue({
    el:&#39;#app&#39;,
    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);
    }
   })

If. vous n'utilisez qu'une balise commune

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

sa fonction est la même que :

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

a le même effet

Recommandations associées :

Explication détaillée de la boucle jQuery et de la modification du href d'une balise

react.js donne la ref du logo, Get content

Explication détaillée de l'ordre d'exécution d'onclick et href d'une balise en html

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!