由来

组件之间的通信可以通过props和$emit的方式进行通信,但是如果组件之间的关系非常复杂的话,通过以上的方式会很麻烦,并且程序会非常脆弱,没有建中性可言。

在vue2.2.0 中新增provide和inject属性,可以方便的帮助我们进行组件间的传值。

使用的方式很简单:

父组件通过provide提供数据,其他组价可以使用inject注入数据。

注意

不推荐直接用于应用程序代码中。一般使用的场景是自定义组件库的时候,底层组件之间需要通信的时候使用。

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

特点

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

格式

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject 选项应该是:

  • 一个字符串数组
  • 或 一个对象,对象的 key 是本地的绑定名(自定义的一个名字),value 是:

    在provide传过来的值(字符串或 Symbol),或

    一个对象,该对象的:

    from 属性是provide传过来的 (字符串或 Symbol)

    default 属性是降级情况下使用的 value

示例:

父组件

<template>
<div>
<h1>HelloWorld</h1>
<One></One>
</div>
</template> <script>
import One from "./One";
export default {
components: { One },
// provide: {
// for: "这是父组件的provide"
// }
provide() {
return {
for: "这是父组件的provide"
};
}
};
</script>

子组件1:

<template>
<div>
<h2>childOne组件</h2>
{{demo}}
<Two></Two>
</div>
</template> <script>
import Two from "./Two.vue";
export default {
name: "One",
// inject: ["for"],
inject: {
for: {
default: () => ({})
}
},
data() {
return {
demo: this.for
};
},
components: {
Two
}
};
</script>

子组件2:

<template>
<div>
<h2>childtwo组件</h2>
{{demo}}
</div>
</template> <script>
export default {
name: "Two",
// inject: ["for"],
inject: {
for: {
default: () => ({})
}
},
data() {
return {
demo: this.for
// demo: "childTwo"
};
}
};
</script>

此时,两个子组件均会收到父组件传递的数据:

vue的provide和inject特性的更多相关文章

  1. vue之provide和inject跨组件传递属性值失败(父组件向子组件传值的两种方式)

    简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...

  2. 介绍Provide以及Inject

    介绍 Vue 的 Provide 以及 Inject Provide 以及 Inject 是 Vue 中用于祖先元素向其所有后台元素注入依赖的接口. 具体用法 // Data.vue ... expo ...

  3. 聊聊 Vue 中 provide/inject 的应用

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

  4. vue provide和inject使用

    provide和inject使用场景也是组件传值,尤其是祖父组件--孙组件等有跨度的组件间传值,单向传值(由provide的组件传递给inject的组件). provide 选项应该是一个对象或返回一 ...

  5. vue中的provide和inject

    vue中的provide和inject:https://blog.csdn.net/viewyu12345/article/details/83011618

  6. vue 3 学习笔记 (八)——provide 和 inject 用法及原理

    在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传 ...

  7. 051_末晨曦Vue技术_处理边界情况之provide和inject依赖注入

    provide和inject依赖注入 点击打开视频讲解更详细 在此之前,在我们描述访问父级组件实例的时候,展示过一个类似这样的例子: <google-map> <google-map ...

  8. vue2.0与3.0中的provide和inject 用法

    1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读 ...

  9. VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂,适合新手

    1. 概述 首因效应告诉我们: 在日常交往中,第一印象是非常重要的,好的第一印象能让我们在与人相处时事半功倍. 但也从另一面告诉我们,不能仅凭第一印象去判断一个人,有时虚假的第一印象,也有可能蒙蔽我们 ...

随机推荐

  1. Spring Cloud第十篇 | 分布式配置中心Config

    ​ 本文是Spring Cloud专栏的第十篇文章,了解前九篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Clo ...

  2. 在 Windows 10 上搭建 Cordova 跨平台开发 Android 环境

    目录 安装 Cordova 安装 Java 和 Android 环境 创建 Cordova 应用程序 构建和运行 Cordova Cordova 简介:Cordova 原名 PhoneGap,是一个开 ...

  3. Nginx安装(我觉得我这篇可能是全网最清晰的一篇安装步骤了)

    原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/46aadb8f-5 ...

  4. 简单实现vue列表点击某个高亮显示

    比如ul下有4个li元素. 给每个li绑定点击事件@click="select_li(index),然后这个点击时间会将一个全局变量 selectLi 赋值为 index 的值. 然后在每个 ...

  5. Vue.js实现大文件分片md5断点续传

    背景 根据部门的业务需求,需要在网络状态不良的情况下上传很大的文件(1G+).其中会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长,请求超时:3,传输中断,必须重新上传导致前功尽 ...

  6. 安装SDK 6.0(二)

    2==>安装SDK 6.0 打开安卓Android Studio 出现 Unable to access Android SDK add-on list 点击 Cancal 在点击Cancel ...

  7. QForkMasterInit: system error caught. error code=0x000005af, message=VirtualAllocEx failed.(遇到还没试过)

    今天在使用Redis的时候出现以下错误: QForkMasterInit: system error caught. error code=0x000005af, message=VirtualAll ...

  8. GO语言编译环境采用gosublime(19新版)

    环境:博主已下载好,并安装在E:/SDK,使用过sublime text3,有git 0x00 环境变量 默认已经有GOPATH(代码存放在这),PATH(安装go的bin目录即E:\SDK\bin) ...

  9. 通过requestAnimationFrame判断浏览器帧率

    /** ** 得到浏览器每秒帧数fps ** ** @Date Mar 13 2013 **/ var showFPS = (function(){ var requestAnimationFrame ...

  10. 微信小程序-强制手机端更新

    小程序的更新机制 开发者在管理后台发布新版本的小程序之后,如果某个用户本地有小程序的历史版本,此时打开的可能还是旧版本.微信客户端会有若干个时机去检查本地缓存的小程序有没有更新版本,如果有则会静默更新 ...