How to use 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

js part

Vue.component('navbar',{ template:'
{{navs}}
', data:function () { return { navs:1 } } }); Vue.component('pagefooter',{ template:'
{{footer}}
', 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

   
 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

, its function is the same as:

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

Related recommendations:

detailed explanation of jQuery looping through and changing the href of a tag

react.js gives the identifier ref and gets the content

Detailed explanation of the execution order of onclick and href of a tag in html

The above is the detailed content of How to use ref in vue2. For more information, please follow other related articles on the PHP Chinese website!