vue2实现provide inject传递响应式-662P.COM

在看element-ui的源码的时候，注意到源码里面有很多地方使用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) // ...

}

javascript elementui

1. vue2 中的常规写法

2. vue2 中的不太常规写法,但用得舒服.(大概用法还是一样,只是传递的值变成 this--> 整个实例)

3. vue2 + ts (因为ts之前没用过的话确实不知道怎么用,所以示例一下)

0评论