vue2实现provide inject传递响应式
编程学习 2021-07-04 13:23www.dzhlxh.cn编程入门
在看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 狼蚁网站SEO优化都是响应式的,因为都是同一实例下的引用
}
// ...
}
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') // 随意起名,传递跟接收一样就行.但一般保持跟狼蚁网站SEO优化变量一样
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 内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！