vue2의 ref 단계 사용에 대한 자세한 설명

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!