Examples of using provide and inject in Vue2.0/3.0

1. What is the use of provide/inject?

The commonly used parent-child component communication method is that the parent component binds the data to be passed to the child component, and the child component receives it through the props attribute. Once the component hierarchy becomes more, it is very troublesome to pass values ​​​​one level at a time in this way, and the code readability is not high, which is inconvenient for later maintenance.

Vue provides provide and inject to help us solve multi-level nested communication problems. In provide, specify the data to be passed to the descendant components, and the descendant components inject the data passed by the grandparent component through inject.

Usage scenario: Since Vue has the $parent property, child components can access parent components. But it is difficult for grandchild components to access ancestor components. Through provide/inject, you can easily access the data of ancestor components across levels

2. How to use provide/inject

provide: is an object/function that returns an object.

Inside are attributes and attribute values.

Note: The provide of the descendant layer will cover the attribute value of the same key in the provide of the grandparent layer

inject: an array of strings, or an object.

The attribute value can be an object, including from and default default values. From is the key (string or Symbol) used to search in the available injection content, which means that the grandfather multi-layer provider provides a lot of data, and the from attribute specifies which key to take;

default specifies the default value.

Specific usage:

Parent Component

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

<script>
export default {
  components:
    MergeTipDialog,
    BreakNetTip
  },
  data () {
    return {
      isShow: false,
      isRouterAlive: true
  },

// The data returned by the parent component to be passed to the subordinate can be a function or the data in data provide () {
    return {
      reload: this.reload isShow: this.isShow
    }
  },
  methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>

Descendants

<template>
  <popup-assign
    :id="id"
    @success="successHandle"
  >
    <div class="confirm-d-tit"><span class="gray-small-btn">{{ name }}</span></div>
    <strong>Will be assigned to</strong>
    <a
      slot="reference"
      class="unite-btn"
    >
      Assignment
  </popup-assign>
</template>
<script>
import PopupAssign from '../PopupAssign'
export default {
//Reference vue reload method content isShow
  inject: ['reload','isShow'],
  components:
    PopupAssign
  },
methods: {
    async successHandle () {
      this.reload()
    }
  }
}
</script>

Vue3.0 usage

Parent Component

Subcomponents

Summarize

This is the end of this article about the usage of provide and inject in vue2.0/3.0. For more relevant content on the usage of provide and inject in vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!