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 $router和$route的区别详解
Dec 02 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue使用watch监听属性变化
Apr 30 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
在PHP中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
2015/10/26 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
JS基础随笔(菜鸟必看篇)
2016/07/13 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
jquery实现加载更多"转圈圈"效果(示例代码)
2020/11/09 jQuery
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
python requests库的使用
2021/01/06 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
室内设计自我鉴定
2013/10/15 职场文书
小学教师听课制度
2014/02/01 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书