> 웹 프론트엔드 > JS 튜토리얼 > Vue.js의 ref($refs) 사용법에 대한 자세한 소개

Vue.js의 ref($refs) 사용법에 대한 자세한 소개

亚连
풀어 주다: 2018-06-19 17:51:12
원래의
3737명이 탐색했습니다.

이 글은 주로 Vue.js의 ref($refs) 사용법에 대한 간략한 설명을 소개하고 이를 예제와 함께 요약하여 참고용으로 제공합니다.

이 글에서는 Vue.js의 ref($refs) 사용법을 요약해서 소개하고 모두와 공유합니다. 자세한 내용은 다음과 같습니다.

Vue.js 문서의 ref 부분을 보고 사용법을 정리합니다. 나중에 참조할 수 있도록 참조하세요.

1. Ref는 외부 요소

HTML 부분

<p id="ref-outside-component" v-on:click="consoleRef">
  <component-father ref="outsideComponentRef">
  </component-father>
  <p>ref在外面的组件上</p>
</p>
로그인 후 복사

js 부분

  var refoutsidecomponentTem={
    template:"<p class=&#39;childComp&#39;><h5>我是子组件</h5></p>"
  };
  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); // p.childComp vue实例
      }
    }
  });
로그인 후 복사

2. Ref는 외부 요소

HTML 부분

<!--ref在外面的元素上-->
<p id="ref-outside-dom" v-on:click="consoleRef" >
  <component-father>
  </component-father>
  <p ref="outsideDomRef">ref在外面的元素上</p>
</p>
로그인 후 복사

JS 부분

  var refoutsidedomTem={
    template:"<p class=&#39;childComp&#39;><h5>我是子组件</h5></p>"
  };
  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在里面的元素上-->
<p id="ref-inside-dom">
  <component-father>
  </component-father>
  <p>ref在里面的元素上</p>
</p>
로그인 후 복사

JS 부분

  var refinsidedomTem={
    template:"<p class=&#39;childComp&#39; v-on:click=&#39;consoleRef&#39;>" +
            "<h5 ref=&#39;insideDomRef&#39;>我是子组件</h5>" +
         "</p>",
    methods:{
      consoleRef:function () {
        console.log(this); // p.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在里面的元素上--全局注册-->
<p id="ref-inside-dom-all">
  <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</p>
로그인 후 복사

JS part

  Vue.component("ref-inside-dom-quanjv",{
    template:"<p class=&#39;insideFather&#39;> " +
          "<input type=&#39;text&#39; ref=&#39;insideDomRefAll&#39; v-on:input=&#39;showinsideDomRef&#39;>" +
          " <p>ref在里面的元素上--全局注册 </p> " +
         "</p>",
    methods:{
      showinsideDomRef:function () {
        console.log(this); //这里的this其实还是p.insideFather
        console.log(this.$refs.insideDomRefAll); // <input type="text">
      }
    }
  });

  var refinsidedomall=new Vue({
    el:"#ref-inside-dom-all"
  });
로그인 후 복사

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

관련 기사:

Vue를 사용하여 여러 클래스를 설정하는 방법

JQuery를 사용하여 양식 유효성 검사를 구현하는 방법, 구체적으로 무엇을 수행해야 합니까?

Angular를 사용하여 국제화를 구현하는 방법(자세한 튜토리얼)

nodejs를 통해 http 모듈을 사용하여 요청 보내기(자세한 튜토리얼)

위 내용은 Vue.js의 ref($refs) 사용법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿