vue2如何實(shí)現(xiàn)provide inject傳遞響應(yīng)式

這篇文章將為大家詳細(xì)講解有關(guān)vue2如何實(shí)現(xiàn)provide inject傳遞響應(yīng)式，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

1. vue2 中的常規(guī)寫(xiě)法

// 父級(jí)組件提供 'foo'
var Provider = {
data(){
    return {
        foo: 'bar'
    }
}
  provide: {
    fooProvide: this.fooFn // 傳遞一個(gè)引用類型函數(shù)過(guò)去
  },
 methods:{
     fooFn() {
        return this.foo
      }
 }
}

var Child = {
  inject: ['fooProvide'],
  computed:{
      fooComputed(){
          return this.fooProvide()  // 因?yàn)閭鬟f過(guò)來(lái)是個(gè)引用類型的函數(shù)
      }
  }
  created () {
    console.log(this.fooComputed) 
  }
  // ...
}

2. vue2 中的不太常規(guī)寫(xiě)法,但用得舒服.(大概用法還是一樣,只是傳遞的值變成 this--> 整個(gè)實(shí)例)

// 父級(jí)組件提供 'foo'
var Provider = {
data(){
    return {
        foo: 'bar',
        other:'...'
    }
}
  provide: {
    app: this// 傳遞整個(gè)this過(guò)去
  },
  mounted(){
      const that = this
      setTimeout(()=>{
          that.foo = '改變值'
      },4000)
  }
}

var Child = {
  inject: ['app'],
  created () {
    console.log(this.app.foo)  // this.app 下面都是響應(yīng)式的,因?yàn)槎际峭粚?shí)例下的引用
  }
  // ...
}

3. vue2 + ts (因?yàn)閠s之前沒(méi)用過(guò)的話確實(shí)不知道怎么用,所以示例一下)

Provide 方式:
 1. @Provide() foo = 'foo'
 2. @Provide('bar') baz = 'bar'

Inject 方式:
 1. @Inject() foo: string
 2. @Inject('bar') bar: string
 3. @Inject(s) baz: string

示例:

// 父級(jí)組件提供 'fooProvide'
@Provide('fooProvide') // 隨意起名,傳遞跟接收一樣就行.但一般保持跟下面變量一樣
fooProvide = this.refreshNumFn // 變量接收一下要傳遞的值
refreshNumFn() {
  return this.refreshNum
}

// 子組件接收
@Inject('fooProvide') fooProvide: any
get valueA(): any {
    return this.fooProvide()
  }
mounted(){
    console.log(this.valueA) // ...
}

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

關(guān)于“vue2如何實(shí)現(xiàn)provide inject傳遞響應(yīng)式”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。