Steps for Vue to use Ref to get components across levels

Vue uses Ref to get component instances across levels

Example Introduction

During the development process, we will inevitably use cross-level ref instance acquisition. In most cases, we can find the required instance through the component's own parent or children . However, when the hierarchy is unclear or too deep, this method is inevitably cumbersome and inefficient.

As shown in the figure below, we use組件E to obtain the component instance of組件D

Document directory structure

There are six components, namely A, B, C, D, E and index, and they are inserted into their respective pages in the order of the components in the above figure.

The page style is as follows:

Install vue-ref

Download vue-ref

npm install vue-ref --save

Global Registration

import ref from 'vue-ref'
Vue.use(ref)

How to use

<!-- vm.dom will be the DOM node -->
<p v-ref="c => this.dom = c">hello</p>

<!-- vm.child will be the child component instance -->
<child-component v-ref="c => this.child = c"></child-component>

<span v-for="n in 10" :key="n" v-ref="(c, key) => {...}">{{ n }} </span>

Root component custom method [using provide and inject]

In our index page, we provide three methods:

• Set the instance of the child component, setChildrenRef
• Get from component instance, getChildrenRef
• Get the current node instance, getRef

provide() {
  return {
   setChildrenRef: (name, ref) => {
    this[name] = ref
   },
   getChildrenRef: name => {
    return this[name]
   },
   getRef: () => {
    return this
   }
  }
 },

Describe each page separately

Component A page:

Get the setChildrenRef method through the injection method, and cache component D through the above instructions

Component B page:

Component C page:

Component D page:

Component E page:

In this page, we not only inject two methods, but also set a method to switch the color of component D to test whether we have really obtained the instance of component D across levels.

result

As you can see, the three parent instances are the same, and the text style of component D is successfully modified in component E. good!

The above is the details of the steps for Vue to use Ref to obtain components across levels. For more information about Vue using Ref to obtain components, please pay attention to other related articles on 123WORDPRESS.COM!