Dear, August has finally arrived. I can’t contain my excitement. Today I will fire my first shot for my 31 days. Let’s cut to the chase.

preface

It is said that before development, we should think about the overall code structure, the division of labor of each module, and the internal data should be thought well before we start to click the keyboard. And I also do so, but still young, resulting in their own excrement is more and more complex. But I learned something from that, and I thought of a few SAO operations, which are ref’s ref’s.

So what is a ref?

Sometimes we need to access a child component or a child element, and we can give the component an ID through the REF attribute. Columns such as

<b-input ref="bInput"></b-input>
Copy the code

Once defined, we can use it in Javascript:

this.$refs.bInput
Copy the code

For a visit.

For example, a method to access a child component:

this.$refs.bInput.fun(a)Copy the code

For a visit.

When ref and V-for are used together, the ref you get will be an array of these sub-components for the corresponding data source.

The $refs only take effect after the components are rendered, and they are not responsive.

So if your component is v-if controlled, you need to wait until the corresponding component is rendered before calling $refs, which is where $nextTick is used. Such as:

this.$nextTick(() => {
    this.$refs.bInput.fun()});Copy the code

Or use v-show to control the explicit or implicit component.

Accessing descendant components

As mentioned above, child components can be accessed through the REF. What if we want to access the descendant components? How to do that.

Since the child component can be accessed through the REF, the child component can also access the descendant component through the REF. That access to the descendant component is not through

This.$refs.id.$refs The result is inevitable.

<parent> 
    <son ref = "son">
        <grandson ref = "grandson"></grandson>
    </son>
</parent>

Copy the code

In the parent component we can pass:

    this.$refs.son.$refs.grandson
Copy the code

To access the events in Grandson.

Of course, this only serves as an “escape pod” for directly manipulating subcomponents — you should avoid accessing $refs in templates.

The End!