Vue privide 和inject 依赖注入的使用详解

目录
  • 前言
  • 示例
  • 项目案例
  • 子组件

前言

关于Vue组件的通讯方式如下：

  • 父子组件：通过prop，$ emit，【$ root，$ parent，$ children】；
  • 非父子组件：vuex，父子层层传递、中央事务总线bus，$ref。

vue官网建议，在正常情况下，上述方式已经能满足绝大多数甚至所有的业务需求，对于应用程序代码应优先使用它们处理。然而，还有一种主要为 高阶插件/组件库 提供的用例办法，即 provide / inject （这对选项需要一起使用）。

from表示在可用的注入内容中搜索用的 key，default当然就是默认值。

示例

// 父级组件提供'foo'
var Provider = {
  provide:{
    foo:'bar'
   },
   //...
  }
 子组件注入'foo'
 var Child = {
   inject:['foo'],
   created(){
    console.log(this.foo) // =>"bar"
   }
   //...
  }

项目案例

父组件

项目最外层的布局组件layout.vue

<template>
   <div>
   <!--主内容-->
   <router-view></router-view>
   </div>
 </template>
 <script>
    export default{
       name:'layout',
       provide(){
          return{
               layout:this//这里的this值当前layout组件实例
	       box:'world'
	     }
	  },
	  data(){
	     return{
	        test:'hello'
	   }
	 },
}
</script>

这里就是我们说的provide，向下提供信息，这里提供的是当前的vue实例，相当于给了后代一个接口。

这样在任何的后代组件中，都可以使用inject选项来接收指定的我们想要添加在这个实例上的属性。

子组件

layout.vue 组件内的router-view 可能路由进来很多其它子孙组件，比如order.vue

<script>
    export default {
     name:'order',
     inject:['layout','box'],
     created(){
     console.log(this.layout.test);//hello
     console.log(this.box);//world
     }
    }

这样也就可以访问了，当做当前vue实例的属性。这样做的好处，相当于给了一个捷径，不用使用$parent一级一级的访问。

我们可以把依赖注入看做一部分“大范围有效的prop”，除了

祖先组件不需要知道哪些后代组件需要使用它提供的属性后代组件不需要知道被注入的属性来自哪里

到此这篇关于Vue privide 和inject 依赖注入的用法的文章就介绍到这了,更多相关Vue privide 和inject内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解析vue的provide和inject使用方法及其原理

    首先来谈谈我们为什么要使用provide/inject呢?对于爷爷和孙子组件之间,甚至太爷爷组件与孙子组件通信我们用vuex不就ok了. 那事实的确如此,但是,请听我说但是,有时候你项目比较小甚至组件通信的场景很少的,那么你引入vuex就为了那么几个通信传参是不是很浪费啊.有人也可能会想到使用$parent获取父组件实例,来获取data/methods,这种两层就还好,那多层呢,组件嵌套很深的话,你怎么弄?写个函数把$parent再封装一下.那不是很麻烦吗,现成的你不用非要曲线救国.哈哈-扯远了

  • vue3中 provide 和 inject 用法及原理

    前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦. 像这种情况,可以使用 provide 和 inject 解决这种问题,不论组件嵌套多深,父组件都可以为所有子组件或孙组件提供数据,父组件使用 provide 提供数据,子组件或孙组件 inject 注入数据.同时兄弟组件之间传值更方便. 一.Vue2 的 provide

  • vue 解决provide和inject响应的问题

    官网上说provide 和 inject 绑定并不是可响应的.这是刻意为之的.然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的. provide: Object | () => Object(一个对象或返回一个对象的函数) inject: Array | { [key: string]: string | Symbol | Object }(一个字符串数组,或一个对象,对象的 key 是本地的绑定名) 要实现父子组件响应,父组件传递的数据类型必须是对象Object,子组件接收的数

  • Vue 2.0 中依赖注入 provide/inject组合实战

    用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件得资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和inject需要配合使用,它们的含义如下: provide        ;一个对象或返回一个对象的函数,该对象包含可注入起子孙的属

  • 详解Vue实战指南之依赖注入(provide/inject)

    案例 UI美眉说咱家的选项菜单太丑了,小哥哥能不能美化一下呀,洒家自然是说小意思啦~ 自定义一个select组件,so easy~ 简单粗暴型: <el-select v-model="favourite" :option="[]"></el-select> option作为数据进来就ok啦. 然后发现下列问题: key-value,不是所有的接口都是id-name option要disabled 怎么办? option存在几种情况怎么办?

  • Vue 2源码阅读 Provide Inject 依赖注入详解

    目录 Provide/Inject 初始化 1. initInjections 依赖初始化 2. initProvide 注入数据初始化 总结 Provide/Inject 初始化 1. initInjections 依赖初始化 该步骤其实发生在 initState 之前,但是由于 provide/inject 一般是配合使用,所以这里调整了一下顺序. 该函数的定义与过程都比较简单: export function initInjections(vm: Component) { const re

  • Vue privide 和inject 依赖注入的使用详解

    目录 前言 示例 项目案例 子组件 前言 关于Vue组件的通讯方式如下: 父子组件:通过prop,$ emit,[$ root,$ parent,$ children]: 非父子组件:vuex,父子层层传递.中央事务总线bus,$ref. vue官网建议,在正常情况下,上述方式已经能满足绝大多数甚至所有的业务需求,对于应用程序代码应优先使用它们处理.然而,还有一种主要为 高阶插件/组件库 提供的用例办法,即 provide / inject (这对选项需要一起使用). from表示在可用的注入内

  • PHP基于反射机制实现自动依赖注入的方法详解

    本文实例讲述了PHP基于反射机制实现自动依赖注入的方法.分享给大家供大家参考,具体如下: 依赖注入又叫控制反转,使用过框架的人应该都不陌生.很多人一看名字就觉得是非常高大上的东西,就对它望而却步,今天抽空研究了下,解开他它的神秘面纱.废话不多说,直接上代码: /** * * 工具类,使用该类来实现自动依赖注入. * */ class Ioc { // 获得类的对象实例 public static function getInstance($className) { $paramArr = sel

  • angular 服务的单例模式(依赖注入模式下)详解

    angular官方文档单例服务的说明 单例模式就不要说了,懂点设计模式的都懂得,真有不明白的自行百度. (解释下angular的命名,angular就是angular2+,angular1叫angularjs,至于angular2,3,4,5,6只是angular的版本,通称angular,希望小伙伴不要叫错了) 单例模式如何在angular的服务中使用呢,angular的官方文档中有这么一段话: 单例服务 服务在每个注入器的范围内是单例的. 在任何一个注入器中,最多只会有同一个服务的一个实例.

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • vue前端开发层次嵌套组件的通信详解

    vue前端开发层次嵌套组件的通信详解

    目录 前言 示例 小结 前言 vue父子组件之间通过props很容易的将父组件的值传递给子组件,如果一个组件嵌套很多层,每一层之间度需要同props进行传值,很麻烦,且不易维护 示例 [示例]A组件中使用了B组件,B组件中使用了C组件,C组件需要使用A组件的数据text及使用A组件的方法getmethod.A组件代码如下: <template> <div> <P>这是A组件</P> <v-comb></v-comb> </div

  • vue从使用到源码实现教程详解

    vue从使用到源码实现教程详解

    搭建环境 项目github地址 项目中涉及了json-server模拟get请求,用了vue-router: 关于Vue生命周期以及vue-router钩子函数详解 生命周期 1.0版本 1.哪些生命周期接口 init Created beforeCompile Compiled Ready Attatched Detached beforeDestory destoryed 2.执行顺序 1. 不具有keep-alive 进入: init->create->beforeCompile->

  • vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2

  • Vue路由钩子之afterEach beforeEach的区别详解

    vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结 使用vue-cli作为开发前提 vue-router已经配置好了 路由写法 routes: [ { path: '/cart', name: 'cart', component: cart, meta :{ title: "购物车"} //用于给定网页名 } ] vue-router 的路由跳转的方法 第一种 : 编程式的导航 <router-link to="/" tag

随机推荐