Explication détaillée de l'utilisation spécifique de ref 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 des différences entre href et src, lien et @import en css

react.js identifie ref et obtient le contenu

Introduction à l'attribut ref dans le composant View dans React Native

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!