首页 > 其他分享 >第二十一篇 vue - 深入组件 - 依赖注入 - provide 和 inject

第二十一篇 vue - 深入组件 - 依赖注入 - provide 和 inject

时间:2023-04-01 11:44:25浏览次数:39  
标签:vue provide default inject 组件 message 注入

Prop 逐级透传问题

provide 和 inject 可以帮助我们解决这一问题。 [1] 一个父组件相对于其所有的后代组件,会作为依赖提供者

任何后代的组件树,无论层级有多深,都可以注入由父组件提供给整条链路的依赖

Prop 逐级透传问题

通常情况下,当我们需要从父组件向子组件传递数据时,会使用 props。

想象一下这样的结构:

有一些多层级嵌套的组件,形成了一颗巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据

在这种情况下,如果仅使用 props 则必须将其沿着组件链逐级传递下去,这会非常麻烦

注意

虽然这里的 <Footer> 组件可能根本不关心这些 props,但为了使 <DeepChild> 能访问到它们,仍然需要定义并向下传递

如果组件链路非常长,可能会影响到更多这条路上的组件

这一问题被称为“prop 逐级透传”,显然是我们希望尽量避免的情况

Provide (提供)

要为组件后代提供数据,需要使用到 provide 选项

export default {
  provide: {
    message: 'hello!'
  }
}

对于 provide 对象上的每一个属性,后代组件会用其 key 为注入名查找期望注入的值,属性的值就是要提供的数据
如果我们需要提供依赖当前组件实例的状态 (比如那些由 data() 定义的数据属性),那么可以以函数形式使用 provide

export default {
  data() {
    return {
      message: 'hello!'
    }
  },
  provide() {
    // 使用函数的形式,可以访问到 `this`
    return {
      message: this.message
    }
  }
}

然而,请注意这不会使注入保持响应性
应用层 Provide

除了在一个组件中提供依赖,我们还可以在整个应用层面提供依赖

import { createApp } from 'vue'

const app = createApp({})

app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')

在应用级别提供的数据在该应用内的所有组件中都可以注入。这在你编写插件时会特别有用,因为插件一般都不会使用组件形式来提供值

Inject (注入)

要注入上层组件提供的数据,需使用 inject 选项来声明

export default {
  inject: ['message'],
  created() {
    console.log(this.message) // injected value
  }
}

注入会在组件自身的状态之前被解析,因此你可以在 data() 中访问到注入的属性
注入别名
当以数组形式使用 inject,注入的属性会以同名的 key 暴露到组件实例上。在上面的例子中,提供的属性名为 "message",注入后以 this.message 的形式暴露。访问的本地属性名和注入名是相同的

如果我们想要用一个不同的本地属性名注入该属性,我们需要在 inject 选项的属性上使用对象的形式

export default {
  inject: {
    /* 本地属性名 */ localMessage: {
      from: /* 注入来源名 */ 'message'
    }
  }
}

这里,组件本地化了原注入名 "message" 所提供的属性,并将其暴露为 this.localMessage
注入默认值
默认情况下,inject 假设传入的注入名会被某个祖先链上的组件提供。如果该注入名的确没有任何组件提供,则会抛出一个运行时警告

如果在注入一个值时不要求必须有提供者,那么我们应该声明一个默认值,和 props 类似

export default {
  // 当声明注入的默认值时
  // 必须使用对象形式
  inject: {
    message: {
      from: 'message', // 当与原注入名同名时,这个属性是可选的
      default: 'default value'
    },
    user: {
      // 对于非基础类型数据,如果创建开销比较大,或是需要确保每个组件实例
      // 需要独立数据的,请使用工厂函数
      default: () => ({ name: 'John' })
    }
  }
}

和响应式数据配合使用

为保证注入方和供给方之间的响应性链接,我们需要使用 computed() 函数提供一个计算属性

import { computed } from 'vue'

export default {
  data() {
    return {
      message: 'hello!'
    }
  },
  provide() {
    return {
      // 显式提供一个计算属性
      message: computed(() => this.message)
    }
  }
}

computed() 函数常用于组合式 API 风格的组件中,但它同样还可以用于补充选项式 API 风格的某些用例

临时配置要求

上面的用例需要设置 app.config.unwrapInjectedRef = true 以保证注入会自动解包这个计算属性。这将会在 Vue 3.3 后成为一个默认行为,而我们暂时在此告知此项配置以避免后续升级对代码的破坏性。在 3.3 后就不需要这样做了

使用 Symbol 作注入名

我们已经了解了如何使用字符串作为注入名

但如果你正在构建大型的应用,包含非常多的依赖提供,或者你正在编写提供给其他开发者使用的组件库,建议最好使用 Symbol 来作为注入名以避免潜在的冲突

我们通常推荐在一个单独的文件中导出这些注入名 Symbol:

// keys.js
export const myInjectionKey = Symbol()


// 在供给方组件中
import { myInjectionKey } from './keys.js'
export default {
  provide() {
    return {
      [myInjectionKey]: {
        /* 要提供的数据 */
      }
    }
  }
}

// 注入方组件
import { myInjectionKey } from './keys.js'
export default {
  inject: {
    injected: { from: myInjectionKey }
  }
}

标签:vue,provide,default,inject,组件,message,注入
From: https://www.cnblogs.com/caix-1987/p/17278331.html

相关文章

  • vue2 + sass + sass-loader
    本地vue脚手架版本:5.0.8本地node版本:v18.13.0项目创建:vueinitwebpackdemo由于项目本身不支持sass,需要首先安装:npminstallsasssass-loader-D,记住:此处无需安装node-sass,安装后报错。由于sass和sass-loader版本不兼容会出现报错(TypeError:this.getOptionsisnotafunc......
  • vue (一)
     vue是一套构建用户界面的前端框架。 构建用户界面指的是用vue往html中填充数据。 框架指的是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能。 vue指令、组件(ui的复用)、路由、vuex、vue组件库 只有把上面罗列的内容掌握之后才有开发vue项目的能力。......
  • VUE分别使用普通方法、计算属性、监听器完成简易计算器
    VUE分别使用普通方法、计算属性、监听器完成简易计算器声明:本方法使用VUE完整框架独立模块组件来实现TOP:实现效果Ⅰ:完整框架Ⅱ:框架实现案例组件功能细分1.APP组件总组件,管理所有组件(每个单独的组件最后都汇总到APP组件里,便于管理)管理汇总:Methodss组件、Watchss......
  • process.env.NODE_ENV 开发环境配置详解(Vue项目)
    开发环境与生产环境下切换baseURL增加.env.development文件NODE_ENV='development'VUE_APP_BASE_URL='/api'增加.env.development文件NODE_ENV='production'VUE_APP_BASE_URL=''使用constaxiosRequest=axios.create({base......
  • 我的第一个项目(七):(解决问题)Vue中canvas无法绘制图片
    好家伙, 现在,我想要把我的飞机大战塞到我的主页里去,想办法把文件导入 然后,直接死在第一步,图片渲染都成问题 先用vue写一个测试文件来测试canvas的绘制<template><div><divref="stage"></div><button@click="drawsth()">添加</button><imgsrc......
  • Vue 2中实现数字滚动效果
     代码:<template><divclass="statistics-num"><!--显示当前数字,不使用逗号分隔符--><spanclass="num">{{currentVal.toString()}}</span><!--显示当前数字,用逗号分隔符--><!--<spanclass="num......
  • Vue引用富文本编辑器
    1.在package.json加上并安装依赖"devDependencies":{"@jsdawn/vue3-tinymce":"^1.1.7",}2.在页面中引入importVue3Tinymcefrom"@jsdawn/vue3-tinymce";3.使用<vue3-tinymcev-model="item.blockDataObj.text":s......
  • vue 使用 导出 Excel
    import*asXLSXfrom"xlsx";exportExcel(){varwb=XLSX.utils.table_to_book(document.querySelector('#data-table2'),{raw:true});varwbout=XLSX.write(wb,{bookType:'xl......
  • SB-RocketMQ-Provider-Consumer20230331
     一、生产者1、pom.xml<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.apache.rocketmq</groupId>......
  • vue2中使用antv/G6节点内容可滚动的ER图
    先举一个栗子: 如果不会请移步到官网的栗子,请点击查看狠人话不多,直接给大家上代码:整体代码片段<template><divid="container"style="position:relative;"></div></template><script>/*eslint-disable*/importG6from"@antv/g6";i......