Home > Article > Web Front-end > Detailed explanation of the specific usage of ref in vue2
This article mainly introduces the specific use of ref in vue2. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.
1. Let’s first define two components
html part
<p id="app"> <navbar ></navbar> <pagefooter ></pagefooter> </p>
js part
Vue.component('navbar',{ template:'<p>{{navs}}</p>', data:function () { return { navs:1 } } }); Vue.component('pagefooter',{ template:'<p>{{footer}}</p>', data:function () { return { footer:11 } } });
How to directly access the navs of navbar and the footer value of pagefooter here? This uses ref
2. Use of ref
Modify components
<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 you only use a common tag
<p ref="demo"></p>
, its function is the same as:
document.querySelector('[ref=demo]');
Related recommendations:
Detailed explanation of the differences between href and src, link and @import in css
react.js identifies ref , Get the content
Introduction to the ref attribute in the View component in react native
The above is the detailed content of Detailed explanation of the specific usage of ref in vue2. For more information, please follow other related articles on the PHP Chinese website!