Introduction détaillée à l'utilisation de ref ($refs) dans Vue.js

Cet article présente principalement un résumé de l'utilisation de ref ($refs) dans Vue.js. Maintenant, je le partage avec vous et le donne comme référence.

Cet article présente un résumé de l'utilisation de ref ($refs) dans Vue.js et le partage avec tout le monde. Les détails sont les suivants :

Regardez la partie ref dans Vue. .js et résumez vous-même la référence. Comment l'utiliser pour référence plus tard.

1. La référence est utilisée sur les composants externes

Partie HTML

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

Partie 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 est utilisé sur les éléments externes

Partie HTML

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

Partie 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. les éléments à l'intérieur --- composant d'enregistrement local

Partie HTML

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

Partie 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 est utilisé à l'intérieur de On l'élément --- composant d'enregistrement global

Partie HTML

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

Partie JS

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

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère. qu'à l'avenir, cela sera utile à tout le monde.

Articles connexes :

Comment configurer plusieurs classes à l'aide de Vue

Comment implémenter la validation de formulaire à l'aide de JQuery, que faut-il faire spécifiquement?

Comment implémenter l'internationalisation à l'aide d'Angular (tutoriel détaillé)

Utiliser le module http pour envoyer des requêtes via nodejs (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!