vue2实现provide inject传递响应式


Posted in Vue.js onMay 21, 2021

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 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
浅析VUE防抖与节流
Nov 24 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue 实现上传组件
May 31 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue使用节流函数的踩坑实例指南
vue实现同时设置多个倒计时
May 20 #Vue.js
Vue和Flask通信的实现
Vue Element UI自定义描述列表组件
使用这 6个Vue加载动画库来减少我们网站的跳出率
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
详解vue中v-for的key唯一性
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
发挥语言的威力--融合PHP与ASP
2006/10/09 PHP
PHP 强制下载文件代码
2010/10/24 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
PDO::exec讲解
2019/01/28 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
js判断元素是否隐藏的方法
2014/06/09 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
Bootstrap导航简单实现代码
2017/03/06 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
深入理解Angular4中的依赖注入
2017/06/07 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
JQuery元素快速查找与操作
2018/04/22 jQuery
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
JavaScript实现原型封装轮播图
2020/12/27 Javascript
老生常谈进程线程协程那些事儿
2017/07/24 Python
python 检测图片是否有马赛克
2020/12/01 Python
师范大学毕业自我鉴定
2013/11/21 职场文书
绿色出行口号
2014/06/18 职场文书
初婚未育证明样本
2014/10/24 职场文书
2014年实习期工作总结
2014/11/27 职场文书
订货会邀请函
2015/01/31 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python
vue3获取当前路由地址
2022/02/18 Vue.js