文章目录[隐藏]
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) // ... }
到此这篇关于vue2实现provide inject传递响应式 的文章就介绍到这了,更多相关vue2 provide inject 内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟!
您可能感兴趣的文章:
- vue2.0结合DataTable插件实现表格动态刷新的方法详解
- vue3 与 vue2 优点对比汇总
- vue2.0/3.0中provide和inject的用法示例
- Vue2.x配置路由导航守卫实现用户登录和退出
- vue2.x的深入学习--关于h函数的说明
- Vue2.x响应式简单讲解及示例
- Vue3对比Vue2的优点总结
- vue2.0/3.0的响应式原理及区别浅析
- vue2.x 从vue.config.js配置到项目优化
- 手写Vue2.0 数据劫持的示例
- Vue2.x-使用防抖以及节流的示例
- 源码揭秘为什么 Vue2 this 能够直接获取到 data 和 methods
本文由 华域联盟 原创撰写:华域联盟 » vue2实现provide inject传递响应式
转载请保留出处和原文链接:https://www.cnhackhy.com/66191.htm