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

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>

js-Teil

  var refoutsidecomponentTem={
    template:"<p class=&#39;childComp&#39;><h5 id="我是子组件">我是子组件</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 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>

JS-Teil

  var refoutsidedomTem={
    template:"<p class=&#39;childComp&#39;><h5 id="我是子组件">我是子组件</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 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>

JS-Teil

  var refinsidedomTem={
    template:"<p class=&#39;childComp&#39; v-on:click=&#39;consoleRef&#39;>" +
            "<h5 id="我是子组件">我是子组件</h5>" +
         "</p>",
    methods:{
      consoleRef:function () {
        console.log(this); // p.childComp  vue实例 
        console.log(this.$refs.insideDomRef); // <h5 id="我是子组件">我是子组件</h5>
      }
    }
  };
  var refinsidedom=new Vue({
    el:"#ref-inside-dom",
    components:{
      "component-father":refinsidedomTem
    }
  });

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>

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"
  });

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!