Ref is used to register reference information for A DOM element or child component. Reference information is registered against the parent component’s $refs object. If used on ordinary DOM elements, the reference information is the element; If used on a child component, the reference information is the component instance.

Note: Whenever you want to manipulate DOM elements directly in the Vue, you must register them with the REF attribute

Ref can be used in three ways:

Name = this.ref. Name = dom element

Name = this.ref. Name = this.ref. Name = this.ref. Name = this.ref. Name

3. How to get an array or DOM node using V-for and ref

When v-for is used for elements or components, the reference information will be an array containing DOM nodes or component instances, an important indication of the ref registration time; Since refs themselves are created as render results, you cannot access them at initial render time because they do not yet exist, and $refs are not reactive, so you should not attempt to use them for data binding in templates.

Note:

1. The ref will not be available until the DOM has been rendered. Ensure that the DOM has been rendered. Mounted (){} or this.$nextTick(()=>{}).

2. If a ref is looping and has multiple names, the value of ref is an array, and you can get a single ref by looping.

Ref is used on external components

<div id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </component-father> <p>ref on outsidecomponent </p> </div> var refoutsidecomponentTem={template:"<div Class ='childComp'><h5> I am a child </h5></div>"}; var refoutsidecomponent=new Vue({ el:"#ref-outside-component", components:{ "component-father":refoutsidecomponentTem }, methods:{ consoleRef:function () { console.log(this); // # refs-outside-component vue instance console.log(this.$refs.outsideComponentRef); // div.childComp vue instance, component instance}}});Copy the code

2. Ref acts on the elements outside

<div id=" ref-outsidedom "V-on :click="consoleRef" > <component-father> </component-father> <p Var refoutsidedomTem={template:"<div class='childComp'><h5> </div>" }; var refoutsidedom=new Vue({ el:"#ref-outside-dom", components:{ "component-father":refoutsidedomTem }, methods:{ consoleRef:function () { console.log(this); // # refs-outsidedom vue instance console.log(this.$refs.outsidedomref); // <p> tag dom element ref on outer element </p>}}});Copy the code

Ref is used on the inside element – locally registers the component

//ref <div id="ref-inside-dom"> <component-father> </component-father> <p>ref </div> var RefinsidedomTem ={template:"<div class='childComp' V-on :click='consoleRef'>" + "<h5 ref='insideDomRef'> I am a child component </h5>" + "</div>", methods:{ consoleRef:function () { console.log(this); // div.childComp Vue instance console.log(this.$refs.insidedomref); // <h5 > I am a child component </h5>}}}; var refinsidedom=new Vue({ el:"#ref-inside-dom", components:{ "component-father":refinsidedomTem } });Copy the code

Ref is used on the inside element — the global registry component

<div id="ref-inside-dom-all"> <ref-inside-dom-quanjv></ref-inside-dom-quanjv> </div> Vue.component("ref-inside-dom-quanjv",{ template:"<div class='insideFather'> " + "<input type='text' <p>ref ='showinsideDomRef'>" + "< p>ref methods:{ showinsideDomRef:function () { console.log(this); InsideFather console.log(this.$refs.insideDomRefall); // <input type="text"> } } }); var refinsidedomall=new Vue({ el:"#ref-inside-dom-all" });Copy the code