vue2에서 ref의 구체적인 사용법에 대한 자세한 설명

이 글은 주로 vue2에서 ref의 구체적인 사용법을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 참고 자료를 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. 먼저 두 가지 구성요소를 정의해 보겠습니다.

html part

  <p id="app">
   <navbar ></navbar>
   <pagefooter ></pagefooter>
  </p>

js part

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

함수는 동일합니다

관련 권장 사항:

css의 href와 src, link 및 @import의 차이점에 대한 자세한 설명

react.js는 식별자 ref를 제공하고 콘텐츠를 가져옵니다

반응 네이티브의 View 구성 요소에서 ref 속성 소개

위 내용은 vue2에서 ref의 구체적인 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!