在看element-ui的源码的时候，注意到源码里面有很多地方使用provide和inject的属性，本文主要介绍了vue2实现provide inject传递响应式，分享给大家，感兴趣的可以了解一下
1. vue2 中的常规写法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // 父级组件提供 '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--> 整个实例)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | // 父级组件提供 'foo'
var Provider = {
data(){
return {
foo: 'bar',
other:'...'<360>
}
}
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
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 父级组件提供 '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) // ...
}
|
发表评论 取消回复