이번에는 vue2에서 ref를 사용하는 단계에 대해 자세히 설명하겠습니다. vue2에서 ref를 사용할 때 주의 사항은 무엇입니까?
이 글에서는 vue2의 ref의 구체적인 사용법을 소개하고 자세한 내용을 여러분과 공유합니다.
1. 먼저 두 가지 구성요소를 정의해 보겠습니다
HTML 부분
<p id="app"> <navbar ></navbar> <pagefooter ></pagefooter> </p>
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 } } });
여기에서 navbar의 nav와 pagefooter의 바닥글 값에 직접 액세스하는 방법은 무엇입니까? ref가 사용되는 곳입니다
2. 심판 사용
구성 요소 수정
<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); } })
그냥 일반 라벨에 사용한다면
<p ref="demo"></p>
그의 역할과:
document.querySelector('[ref=demo]');
효과는 동일합니다
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 vue2의 ref 단계 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!