Maison > Article > interface Web > 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:'<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 ? 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:'#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); } })
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!