Maison >interface Web >js tutoriel >Explication détaillée de l'utilisation spécifique de ref dans vue2

Explication détaillée de l'utilisation spécifique de ref dans vue2

小云云
小云云original
2018-01-20 13:18:282440parcourir

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(&#39;navbar&#39;,{
    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(&#39;[ref=demo]&#39;);

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn