脚本宝典收集整理的这篇文章主要介绍了vue2实现provide inject传递响应式，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
// 父级组件提供 '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) } // ... }
// 父级组件提供 '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 下面都是响应式的,因为都是同一实例下的引用
}
// ...
}
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 内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的vue2实现provide inject传递响应式全部内容，希望文章能够帮你解决vue2实现provide inject传递响应式所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。