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 implementation of verification code case

This article shares the specific code for JavaScr...

Implementation code for partial refresh of HTML page

Event response refresh: refresh only when request...

Chrome plugin (extension) development guide (complete demo)

Table of contents Written in front Preface What i...

Summary of Nginx location and proxy_pass path configuration issues

Table of contents 1. Basic configuration of Nginx...

How to make React components full screen

introduce This article is based on React + antd t...

An example of elegantly writing status labels in Vue background

Table of contents Preface optimization Extract va...

Detailed explanation of using Docker to build externally accessible MySQL

Install MySQL 8.0 docker run -p 63306:3306 -e MYS...

Detailed summary of mysql sql statements to create tables

mysql create table sql statement Common SQL state...

Web page creation for beginners: Learn to use HTML's hyperlink A tag

The hyperlink a tag represents a link point and i...

How to set background color and transparency in Vue

Background color and transparency settings As sho...

Detailed steps to install nginx on Apple M1 chip and deploy vue project

brew install nginx Apple Mac uses brew to install...

SQL serial number acquisition code example

This article mainly introduces the sql serial num...

MySQL password is correct but cannot log in locally -1045

MySQL password is correct but cannot log in local...

JS Easy to understand Function and Constructor

Table of contents 1. Overview 1.1 Creating a func...