Vue.js의 ref($refs) 사용법에 대한 자세한 소개-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-19 17:51:12

원래의

3724명이 탐색했습니다.

이 글은 주로 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"
  });

로그인 후 복사

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