Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Einführung in die Verwendung von ref ($refs) in Vue.js

亚连
Freigeben: 2018-06-19 17:51:12
Original
3696 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich eine Zusammenfassung der Verwendung von ref ($refs) in Vue.js vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Dieser Artikel stellt eine Zusammenfassung der Verwendung von ref ($refs) in Vue.js vor und teilt sie mit allen. Die Details sind wie folgt:

Sehen Sie sich den Ref-Teil in Vue an .js-Dokument und fassen Sie die Referenz selbst zusammen, wie Sie sie später als Referenz verwenden können.

1. ref wird für externe Komponenten verwendet

HTML-Teil

<p id="ref-outside-component" v-on:click="consoleRef">
  <component-father ref="outsideComponentRef">
  </component-father>
  <p>ref在外面的组件上</p>
</p>
Nach dem Login kopieren

js-Teil

  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实例
      }
    }
  });
Nach dem Login kopieren

2. Ref wird für die äußeren Elemente verwendet

HTML-Teil

<!--ref在外面的元素上-->
<p id="ref-outside-dom" v-on:click="consoleRef" >
  <component-father>
  </component-father>
  <p ref="outsideDomRef">ref在外面的元素上</p>
</p>
Nach dem Login kopieren

JS-Teil

  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>
      }
    }
  });
Nach dem Login kopieren

3. Ref wird für die inneren Elemente verwendet ---teilweise registriert Komponente

HTML-Teil

<!--ref在里面的元素上-->
<p id="ref-inside-dom">
  <component-father>
  </component-father>
  <p>ref在里面的元素上</p>
</p>
Nach dem Login kopieren

JS-Teil

  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
    }
  });
Nach dem Login kopieren

4. Ref wird für die darin enthaltenen Elemente verwendet---globale Registrierungskomponente

HTML-Teil

<!--ref在里面的元素上--全局注册-->
<p id="ref-inside-dom-all">
  <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</p>
Nach dem Login kopieren

JS-Teil

  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"
  });
Nach dem Login kopieren

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So richten Sie mehrere Klassen mit Vue ein

Wie implementiert man die Formularvalidierung mit JQuery, was ist zu tun? speziell?

So implementieren Sie die Internationalisierung mit Angular (ausführliches Tutorial)

Verwenden Sie das http-Modul, um Anfragen über NodeJS zu senden (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Verwendung von ref ($refs) in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage