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) // ...
}

到此这篇关于vue2实现provide inject传递响应式 的文章就介绍到这了,更多相关vue2 provide inject 内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!