Vue component communication – provide / inject

Time:2022-5-14

Component communication is a very common operation in Vue development, and props is certainly the most commonly used component communication, but props is convenient for parent-child component communication, but when there are many component levels, props operation is very cumbersome and not easy to write;
Note: for convenience, I put inject directly in the sub component

Provide / inject basic format

  1. Provide format in parent component
    <template>
        <div>
          {{a}}
          <test />
        </div>
      </template>
      <script>
      import test from './compoent/test.vue'
      export default {
        components: { test },
        name: 'showExcel',
          data () {
            return {
              //To define an object, here is a trick, which will be discussed later
              a: { b: 123 },
            }
          },
          provide () {
            return { a: this.a }
          },
      }
      </script>
  2. Basic format of inject in sub component or sub component
      <template>
        <div @click="changeA">{{a}}</div>
      </template>
    
      <script>
      export default {
        name: 'test',
        inject: ['a']
      }
      </script>
    
  3. Now the effect picture:

    Vue component communication - provide / inject

    Effect picture 1

Provide / inject failed to receive real-time data

  1. In real development, the data is often obtained from the back end. At this time, after declaring the value directly in the provide, it will be found that the real-time updated value cannot be obtained in the grandson component. At this time, it needs to be obtained with the help of methods;
    //Parent component
      provide () {
        return { a: this.a, getA: this.getA }
      },
      mounted () {
        setTimeout(() => {
          this.a.b = '77';
        }, 2000);
      },
      methods: {
        getA () { return this.a }
      }
    
      //Subcomponents
      inject: ['a', 'getA'],
      mounted () {
        this.$nextTick(() => {
          console.log(this.getA()); // {b:123,c:77}
        }, 2000);
      },
  2. Here, setTimeout is used to simulate the network request. After changing the value of the parent component CC, the CC received in the child component is still the initial value 123456 given by us, which has not changed; But through the method getcc
    The returned value is the latest value we have requested, and it has the same effect in the view;
    //Parent component
      data () {
        return {
          //To define an object, here is a trick, which will be discussed later
          a: { b: 123 },
          cc: 123456,
        }
      },
      provide () {
        return { a: this.a, cc: this.cc, getCC: this.getCC }
      },
      mounted () {
        setTimeout(() => {
          this.cc = '456'
        }, 2000);
      },
      methods: {
        getCC () { return this.cc },
      }
    
      //Subcomponents
      inject: ['getCC', 'cc'],
      mounted () {
        setTimeout(() => {
          console.log('cc', this.cc); // cc 123456
          console.log('getCC', this.getCC()); // getCC 456
        }, 3000);
      },
  3. design sketch

    Vue component communication - provide / inject

    design sketch
  4. Let’s add an auxiliary parameter to the getcc method of the parent component to see the printing effect
    //Parent component
      <template>
        <div>
          CC: {{CC} = = getcc: {{getcc()}} in parent component
          <test />
        </div>
      </template>
      <script>
      import test from './compoent/test.vue'
      export default {
        components: { test },
        name: 'showExcel',
        data () {
          return {
            //To define an object, here is a trick, which will be discussed later
            a: { b: 123 },
            cc: 123456,
          }
        },
        provide () {
          return { cc: this.cc, getCC: this.getCC }
        },
        mounted () {
          setTimeout(() => {
            this.cc = '456'
          }, 2000);
        },
        methods: {
          getCC (a) { console.log('99999', a); return this.cc },
        }
      }
      </script>
    
      //Subcomponents
      <template>
        <div>
          CC: {{CC} = = getcc: {{getcc ('888 ')}}
        </div>
      </template>
    
      <script>
      export default {
        name: 'test',
        inject: [ 'getCC', 'cc'],
        mounted () {
          setTimeout(() => {
            console.log('cc', this.cc); // cc 123456
            console.log('getCC', this.getCC('000')); // getCC 456
          }, 3000);
        },
      </script>
  5. Let’s take a look at the console printing effect

    Vue component communication - provide / inject

    Console renderings
  6. It can be seen from the console rendering that the getcc method in the parent component and child component view templates is executed twice respectively, because it is executed once when the view is initially rendered and once when the CC is updated, so the data in the view will change;
    The role of parent-child component communication JS reference in Vue

Recommended Today

6、 Transaction index view cursor

1、 Business Personnel information is as follows: (the second column is the ID number, and the third column is the bank card number) –Liu Bei 420107198905064135 6225125478544587–Guan Yu 420107199507104133 6225547858741263–Zhang Fei 420107199602034138 6225547854125656 (1) Assuming Liu Bei withdraws 6000 (add check constraint, set account balance must be > = 0), it is required to use […]