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的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
ant design vue的form表单取值方法
Jun 01 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 url地址栏传中文乱码解决方法集合
2010/06/25 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python冒泡排序简单实现方法
2015/07/09 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
Python Django路径配置实现过程解析
2020/11/05 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
伦敦剧院门票:From The Box Office
2018/06/30 全球购物
志愿者事迹材料
2014/12/26 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers