vue2如何實現provide inject傳遞響應式

這篇文章將為大家詳細講解有關vue2如何實現provide inject傳遞響應式，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1. vue2 中的常規寫法

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

var Child = {
  inject: ['fooProvide'],
  computed:{
      fooComputed(){
          return this.fooProvide()  // 因為傳遞過來是個引用類型的函數
      }
  }
  created () {
    console.log(this.fooComputed) 
  }
  // ...
}

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

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

var Child = {
  inject: ['app'],
  created () {
    console.log(this.app.foo)  // this.app 下面都是響應式的,因為都是同一實例下的引用
  }
  // ...
}

3. vue2 + ts (因為ts之前沒用過的話確實不知道怎么用,所以示例一下)

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

示例:

// 父級組件提供 '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是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

關于“vue2如何實現provide inject傳遞響應式”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。