provide inject 传递响应式的相关用法
1. vue2 中的常规写法
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--> 整个实例)
var Provider = {
data(){
return {
foo: 'bar',
other:'...'
}
}
provide: {
app: this
},
mounted(){
const that = this
setTimeout(()=>{
that.foo = '改变值'
},4000)
}
}
var Child = {
inject: ['app'],
created () {
console.log(this.app.foo)
}
}
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
示例:
@Provide('fooProvide')
fooProvide = this.refreshNumFn
refreshNumFn() {
return this.refreshNum
}
@Inject('fooProvide') fooProvide: any
get valueA(): any {
return this.fooProvide()
}
mounted(){
console.log(this.valueA)
}