vue2中的provide inject 传递响应式

更新日期: 2021-05-21阅读: 1k标签: 响应式

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) // ...
}

作者:TAOBO
链接:https://juejin.cn/post/6964575724925616142
来源:掘金

链接: https://www.fly63.com/article/detial/10416

移动端web app要使用rem实现自适应布局:font-size的响应式

rem是相对于根元素html,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。

使用现代CSS的响应式版面

通过模块化缩放,使用传统属性和calc()来动态缩放你的字体大小.为字体大小使用百分比.给文本内容和媒体查询使用em,针对不同视口尺寸使用不同缩放值.视口越小,缩放比例越小,使用媒体查询或者media()函数基于视口来改变比例和基础字号

web响应式图片的5种实现

在目前的前端开发中,我们经常需要进行响应式的网站开发。本文着重介绍一下弹性图片,也就是响应式图片的解决方案:js或服务端、srcset 、sizes 、picture标签、svg图片

HTML5+CSS3响应式垂直时间轴,高端,大气

HTML5+CSS3响应式垂直时间轴,使用了HTML5标签<section>,时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中,多个DIV形成一个序列,并把这些DIV放在<section>中。

实现响应式_CSS变量

CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable)。CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示变量名称

vue响应式原理及依赖收集

Vue通过设定对象属性的setter/getter方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。

vue响应式系统--observe、watcher、dep

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,我们可以只关注数据本身

Responsive Web Design 响应式网页设计

常见的布局方案:固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸;可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸

响应式布局的实现

响应式布局,即 Responsive design,在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式布局的关键不仅仅在于布局

深入响应式原理

说到响应式原理其实就是双向绑定的实现,说到 双向绑定 其实有两个操作,数据变化修改dom,input等文本框修改值的时候修改数据1. 数据变化 -> 修改dom;2. 通过表单修改value -> 修改数据

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!