文档章节

vue 跨层组件通讯 provide inject

 阿豪boy
发布于 11/11 23:21
字数 665
阅读 26
收藏 0

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

https://cn.vuejs.org/v2/api/#provide-inject

  • 类型

    • provideObject | () => Object
    • injectArray<string> | { [key: string]: string | Symbol | Object }
  • 详细

    provide 和 inject 主要为高阶插件 / 组件库提供用例。并不推荐直接用于应用程序代码中。

    这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

    provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

    inject 选项应该是:

    • 一个字符串数组,或
    • 一个对象,对象的 key 是本地的绑定名,value 是:
      • 在可用的注入内容中搜索用的 key (字符串或 Symbol),或
      • 一个对象,该对象的:
        • from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
        • default 属性是降级情况下使用的 value

    提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

 

 

对象不是响应式的,但是对象的属性是响应式的

 

A

如果只是传递值, 则直接传递即可, 但要是想使用响应式数据, 需要包装

不仅可以传递data, 也可以传递方法, 这种通讯方式灵活, 并且代码量少且直观

<template>
  <div>
    <h1>A</h1>
    <h3>{{a}} - {{b.name}} - {{c}}</h3>
    ---
    <B @text-change="change"></B>
  </div>
</template>

<script>
  import B from './B'

  export default {
    components: {
      B
    },
    data() {
      return {
        a: "Aa",
        b: {name: "Ab"},
        c: "Ac"
      }
    },
    provide() {
      return {
        a: this.a,
        b: this.b,
        c: this.c,
        change: this.change
      }
    },
    methods: {
      change(val) {
        console.log("A change, ", val)
        this.b.name += "C"
      }
    }
  }
</script>

<style scoped>

</style>

 

B

<template>
  <div>
    <h1>B</h1>
    <h3>{{a}} - {{b.name}} - {{c}}</h3>
    ---
    <C></C>
  </div>
</template>

<script>
  import C from './C'

  export default {
    components: {
      C
    },
    props: ['a'],
    inject: ['a', 'b', 'c']
  }
</script>

<style scoped>

</style>

 

C

可以调用A中的方法, 并且对象的属性时响应式的, A中变化后, C中也会同步变化

<template>
  <div>
    <h1>C</h1>
    <h3>{{Ca}} - {{Cb.name}} - {{Cd}}</h3>
    <button @click="change">change</button>
  </div>
</template>

<script>
  export default {
    inject: {
      'Ca': {
        from: 'a'
      },
      'Cb': {
        from: 'b',
      },
      "Cd": {
        from: 'd',
        // 可以使用值或者函数
        default: () => 'Cd'
      },
      "Achange": {
        from: "change"
      }
    },
    methods: {
      change() {
        // 直接赋值不会触发更新
        // this.$attrs['b'] = 'Cb'

        console.log("C change")
        this.Achange("Cb")
        // this.$emit('text-change', "Cb")
      }
    }
  }
</script>

<style scoped>

</style>

 

© 著作权归作者所有

粉丝 25
博文 1587
码字总数 1107197
作品 0
西安
私信 提问
vue组件间通信六种方式(完整版)

前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系: 如上图所示,A 和 B、B 和 C、B 和...

浪里行舟
05/17
0
0
Vue倔强青铜-入门和组件化通信G

入门 作为前端最容易上手的框架,Vue入门其实没啥说的,我放一段清单的代码,大家能看懂就说明能上手了 大概包含的内容如下,对这个例子熟悉后,才是我们的正文,如果上面代码有没看懂的地方...

蜗牛老湿
03/17
0
0
聊聊 Vue 中 provide/inject 的应用

众所周知,在组件式开发中,最大的痛点就在于组件之间的通信。在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数据管理的...

格子熊
11/08
0
0
Vue2.0学习(三)--Vue数据通信详解

一、前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。组件间如何传递数据就显得至关重要。本文尽可能罗列出一些常见的数据...

人心思动
2018/08/09
0
0
vue-property-decorator使用指南

在Vue中使用TypeScript时,非常好用的一个库,使用装饰器来简化书写。 1、安装npm install --save vue-property-decorator @Component (from vue-class-component) @Prop @Model @Watch @Em...

victor318x
2018/12/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里云视频云正式支持AV1编码格式 为视频编码服务降本提效

今天我们要说的 AV1 可不是我们平时说的 .AVI 文件格式,它是由AOM(Alliance for Open Media,开放媒体联盟)制定的一个开源、免版权费的视频编码格式,可以解决H.265昂贵的专利费用和复杂的...

一肥仔
19分钟前
8
0
软件缺陷静态分析 CodeSonar 5.2 新版发布

对于使用C和C++构建安全关键软件的开发团队而言,CodeSonar一直是首选的静态分析解决方案。在近期发行的版本中,CodeSonar通过使用开放标准来扩展其语言覆盖范围,并增加了对Java、C#、Obj...

旋极科技
20分钟前
5
0
数据迁移

1. insert into values 或 insert into select批量插入时,都满足事务的原子性与一致性,但要注意insert into select的加锁问题。 2. replace into与insert into on duplicate key update都可...

qiang123
26分钟前
6
0
Linux装Windows系统后还不会激活?3招教你搞定

     相信大家已经发现荣耀MagicBook科技尝鲜版有多“香”了,不但可以轻松的将Linux系统装回Windows系统,还足足省下了300大洋!但是装回系统就万事大吉了吗?NoNoNo,我们还需要去激活...

梅丽莎好
29分钟前
6
0
Tomcat8源码分析-请求处理过程

上一篇:Tomcat8源码分析-启动流程-start方法 此篇主要讲Tomcat8从接收请求到处理请求的时序图画出来,并用文字描述一下主要流程 时序图 说明 文字描述流程之前先提示如下两点: 1.Acceptor...

特拉仔
31分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部