Vue2 implements provide inject transfer response

Time:2021-7-27

1. Conventional writing in vue2

//Parent component provides' foo '
var Provider = {
data(){
    return {
        foo: 'bar'
    }
}
  provide: {
    Fooprovide: this. Fofn // pass a function of reference type
  },
 methods:{
     fooFn() {
        return this.foo
      }
 }
}

var Child = {
  inject: ['fooProvide'],
  computed:{
      fooComputed(){
          Return this. Fooprovide() // because it is a function of reference type
      }
  }
  created () {
    console.log(this.fooComputed) 
  }
  // ...
}

2. The expression in vue2 is unconventional, but it is comfortable to use. (the usage is probably the same, but the passed value becomes this — > the whole instance)

//Parent component provides' foo '
var Provider = {
data(){
    return {
        foo: 'bar',
        other:'...'
    }
}
  provide: {
    App: this // pass the whole this
  },
  mounted(){
      const that = this
      setTimeout(()=>{
          That.foo = 'change value'
      },4000)
  }
}

var Child = {
  inject: ['app'],
  created () {
    Console.log (this. App. Foo) // the following items of this.app are all responsive, because they are all references under the same instance
  }
  // ...
}

3. Vue2 + TS (if TS has not been used before, I really don’t know how to use it, so give an example)

Provide mode:
 1. @Provide() foo = ‘foo’
 2. @Provide(‘bar’) baz = ‘bar’

Inject mode:
 1. @Inject() foo: string
 2. @Inject(‘bar’) bar: string
 3. @Inject(s) baz: string

Example:

//Parent component provides' fooprovide '
@Provide ('fooprovide ') // name it as you like. Just pass it and receive it. But it usually remains the same as the following variables
Fooprovide = this.refreshnumfn // the variable receives the value to be passed
refreshNumFn() {
  return this.refreshNum
}

//Sub component reception
@Inject('fooProvide') fooProvide: any
get valueA(): any {
    return this.fooProvide()
  }
mounted(){
    console.log(this.valueA) // ...
}

This is the end of this article about vue2’s implementation of the provide inject delivery response. For more information about vue2’s provide inject, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

VBS obtains the operating system and its version number

VBS obtains the operating system and its version number ? 1 2 3 4 5 6 7 8 9 10 11 12 ‘************************************** ‘*by r05e ‘* operating system and its version number ‘************************************** strComputer = “.” Set objWMIService = GetObject(“winmgmts:” _  & “{impersonationLevel=impersonate}!\\” & strComputer & “\root\cimv2”) Set colOperatingSystems = objWMIService.ExecQuery _  (“Select * from […]