Vue.js 에서 ref($refs)용법 예 를 들 어 요약 합 니 다.

본 고 는 Vue.js 에서 ref($refs)의 용법 을 예 로 들 어 정리 하여 여러분 에 게 공유 하고 구체 적 으로 다음 과 같 습 니 다.
Vue.js 문서 의 ref 부분 을 보고 나중에 찾 아 볼 수 있 도록 ref 의 사용 방법 을 스스로 정 리 했 습 니 다.
1.ref 는 외부 구성 요소 에 사 용 됩 니 다.
HTML 부분

<div id="ref-outside-component" v-on:click="consoleRef">
  <component-father ref="outsideComponentRef">
  </component-father>
  <p>ref       </p>
</div>

js 부분

  var refoutsidecomponentTem={
    template:"<div class='childComp'><h5>     </h5></div>"
  };
  var refoutsidecomponent=new Vue({
    el:"#ref-outside-component",
    components:{
      "component-father":refoutsidecomponentTem
    },
    methods:{
      consoleRef:function () {
        console.log(this); // #ref-outside-component   vue  
        console.log(this.$refs.outsideComponentRef); // div.childComp vue  
      }
    }
  });

2.ref 는 바깥 요소 에 사용 합 니 다.
HTML 부분

<!--ref       -->
<div id="ref-outside-dom" v-on:click="consoleRef" >
  <component-father>
  </component-father>
  <p ref="outsideDomRef">ref       </p>
</div>

JS 부분

  var refoutsidedomTem={
    template:"<div class='childComp'><h5>     </h5></div>"
  };
  var refoutsidedom=new Vue({
    el:"#ref-outside-dom",
    components:{
      "component-father":refoutsidedomTem
    },
    methods:{
      consoleRef:function () {
        console.log(this); // #ref-outside-dom  vue  
        console.log(this.$refs.outsideDomRef); //  <p> ref       </p>
      }
    }
  });

3.ref 는 안의 요소 에 사용-부분 등록 구성 요소
HTML 부분

<!--ref       -->
<div id="ref-inside-dom">
  <component-father>
  </component-father>
  <p>ref       </p>
</div>

JS 부분

  var refinsidedomTem={
    template:"<div class='childComp' v-on:click='consoleRef'>" +
            "<h5 ref='insideDomRef'>     </h5>" +
         "</div>",
    methods:{
      consoleRef:function () {
        console.log(this); // div.childComp  vue   
        console.log(this.$refs.insideDomRef); // <h5 >     </h5>
      }
    }
  };
  var refinsidedom=new Vue({
    el:"#ref-inside-dom",
    components:{
      "component-father":refinsidedomTem
    }
  });

4.ref 는 안에 있 는 요소 에 사용 합 니 다-전역 등록 구성 요소
HTML 부분

<!--ref       --    -->
<div id="ref-inside-dom-all">
  <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</div>

JS 부분

  Vue.component("ref-inside-dom-quanjv",{
    template:"<div class='insideFather'> " +
          "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
          " <p>ref       --     </p> " +
         "</div>",
    methods:{
      showinsideDomRef:function () {
        console.log(this); //   this    div.insideFather
        console.log(this.$refs.insideDomRefAll); // <input type="text">
      }
    }
  });

  var refinsidedomall=new Vue({
    el:"#ref-inside-dom-all"
  });

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.