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

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!

You may also be interested in:
  • Detailed explanation of how to dynamically refresh the table using vue2.0 combined with the DataTable plug-in
  • Comparison of the advantages of vue3 and vue2
  • Vue2.x configures routing navigation guards to implement user login and exit
  • In-depth study of vue2.x--Explanation of the h function
  • Vue2.x responsiveness simple explanation and examples
  • Summary of the advantages of Vue3 vs. Vue2
  • Vue2 implements provide inject to deliver responsiveness
  • A brief analysis of the responsiveness principle and differences of Vue2.0/3.0
  • vue2.x configuration from vue.config.js to project optimization
  • Handwritten Vue2.0 data hijacking example
  • Vue2.x - Example of using anti-shake and throttling
  • Source code reveals why Vue2 this can directly obtain data and methods

<<:  A colorful cat under Linux

>>:  MySQL merge and split by specified characters example tutorial

Recommend

JavaScript code to achieve a simple calendar effect

This article shares the specific code for JavaScr...

MySQL 8.0.20 installation and configuration tutorial under Docker

Docker installs MySQL version 8.0.20 for your ref...

Some summary of MySQL's fuzzy query like

1. Common usage: (1) Use with % % represents a wi...

How to use the Fuser command in Linux system

What is Fuser Command? The fuser command is a ver...

How to implement MySQL bidirectional backup

MySQL bidirectional backup is also called master-...

How to delete all contents in a directory using Ansible

Students who use Ansible know that Ansible only s...

Detailed tutorial on using VMware WorkStation with Docker for Windows

Table of contents 1. Introduction 2. Install Dock...

How to configure Java environment variables in Linux system

Configure Java environment variables Here, the en...

How to install and uninstall open-vswitch in Linux

1. Compile and install ovs from source code: Inst...

Detailed explanation of SQL injection - security (Part 2)

If there are any errors in this article or you ha...

mysql wildcard (sql advanced filtering)

Table of contents First, let's briefly introd...