Detailed introduction to the usage of ref ($refs) in Vue.js

This article mainly introduces a brief discussion on the usage of ref ($refs) in Vue.js with examples and summary. Now I will share it with you and give you a reference.

This article introduces a summary of the usage of ref ($refs) in Vue.js and shares it with everyone. The details are as follows:

Look at the ref part in the Vue.js document and summarize the ref yourself. How to use it for reference later.

1. Ref is used on external components

HTML part

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

js part

  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 is used on the outer elements

HTML part

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

JS part

  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 is used on the inner elements---partially Registered component

HTML part

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

JS part

  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 is used on the elements inside---global registration component

HTML part

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to set up multiple Classes using Vue

How to implement form validation using JQuery, what should be done specifically?

How to implement internationalization using Angular (detailed tutorial)

Send a request using the http module through nodejs (detailed tutorial)

The above is the detailed content of Detailed introduction to the usage of ref ($refs) in Vue.js. For more information, please follow other related articles on the PHP Chinese website!