Tips for using provide and inject to pass data across levels in Vue

Tips of using provide and inject to transfer data across levels in Vue

In the development of Vue, transferring data between components is a very common requirement. Normally, we can transfer data between components through props and emit methods, but when there are multiple levels of nesting between components, this method becomes more cumbersome and it is very easy to cause code coupling. . At this time, provide and inject in Vue can come in handy.

provide and inject are new features introduced in Vue version 2.2.0. These two APIs can easily implement the operation of passing data down layer by layer. In the following example, we will use an example with multiple levels of nested components to demonstrate how to use provide and inject to achieve cross-level transfer of data.

Suppose we have the following multi-layer nested components:

<template>
  <div>
    <child1></child1>
  </div>
</template>

<script>
import child1 from './child1.vue';
export default {
  components: {
    child1
  }
};
</script>

<template>
  <div>
    <child2></child2>
  </div>
</template>

<script>
import child2 from './child2.vue';
export default {
  components: {
    child2
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
    <grandchild></grandchild>
  </div>
</template>

<script>
import grandchild from './grandchild.vue';
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  components: {
    grandchild
  }
};
</script>

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

In this example, we hope to obtain the message data defined in the Parent component in the Grandchild component. The following is the specific implementation method:

Use the provide attribute in the Parent component to provide the data that needs to be passed:

<template>
  <div>
    <child1 :message="message"></child1>
  </div>
</template>

<script>
export default {
  provide: {
    message: 'Hello Vue!'
  }
};
</script>

Use the inject attribute in the Grandchild component to inject the data provided by provide:

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
};
</script>

In this way, the Grandchild component can easily obtain the message data provided in the Parent component.

In addition to using fixed data in provide and inject, we can also use methods in provide and inject to provide and obtain data. For example, provide a method in the Parent component to dynamically set message data:

<template>
  <div>
    <child1 :set-message="setMessage"></child1>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      setMessage: message => {
        this.message = message;
      }
    };
  },
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

Call the setMessage method in the Child1 component to set the message data:

<template>
  <div>
    <child2 :message="message"></child2>
    <button @click="setMessage">Set Message</button>
  </div>
</template>

<script>
export default {
  props: ['setMessage'],
  data() {
    return {
      message: 'Hello World!'
    };
  }
};
</script>

Inject setMessage through the inject attribute in the Grandchild component Method:

<template>
  <div>
    <p>{{message}}</p>
    <button @click="setMessage">Set Parent Message</button>
  </div>
</template>

<script>
export default {
  inject: ['setMessage', 'message']
};
</script>

In this way, the Grandchild component can call the setMessage method in the Parent component to dynamically set the message data.

Summary:

By using the provide and inject attributes, we can easily achieve the purpose of passing data across levels. When using these two properties, you need to pay attention to avoid deep nesting and component coupling to achieve the goals of code simplicity and maintainability.

The above is the detailed content of Tips for using provide and inject to pass data across levels in Vue. For more information, please follow other related articles on the PHP Chinese website!