当前位置: 首页 > news >正文

inject和provide的使用

官网介绍用法

V2.2.0 新增的方法
类型

provide:Object | () => Object
inject:Array<string> | { [key: string]: string | Symbol | Object }

介绍
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
provide 选项应该是
一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key

inject 选项应该是:

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

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

示例:

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

利用 ES2015 Symbols、函数 provide 和对象 inject:

const s = Symbol()const Provider = {provide () {return {[s]: 'foo'}}
}const Child = {inject: { s },// ...
}

接下来 2 个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在 props 和 data 初始化之后得到。

使用一个注入的值作为一个 property 的默认值:

const Child = {inject: ['foo'],props: {bar: {default () {return this.foo}}}
}

使用一个注入的值作为数据入口:

const Child = {inject: ['foo'],data () {return {bar: this.foo}}
}

在 2.5.0+ 的注入可以通过设置默认值使其变成可选项:

const Child = {inject: {foo: { default: 'foo' }}
}

如果它需要从一个不同名字的 property 注入,则使用 from 来表示其源 property:

const Child = {inject: {foo: {from: 'bar',default: 'foo'}}
}

与 prop 的默认值类似,你需要对非原始值使用一个工厂方法:

const Child = {inject: {foo: {from: 'bar',default: () => [1, 2, 3]}}
}
http://www.lryc.cn/news/174962.html

相关文章:

  • 2023年中国研究生数学建模竞赛D题
  • Unity制作曲线进度条
  • 面试:C++ 11 智能指针
  • 设计模式——3. 抽象工厂模式
  • vscode 无法使用 compilerPath“D:.../bin/arm-none-eabi-g++.exe”解析配置。
  • Vue.js入门模板语法[上] 及Vue.js实现购物车---详细讲解
  • windows下gvim的配置
  • 基于复旦微的FMQL45T900全国产化ARM开发开发套件(核心板+底板)
  • Leetcode Top100(23)环形链表
  • 线性代数基础-行列式
  • RT-Thread(学习)
  • 【MySQL】 MySQL 死锁问题分析优化器特性及优化方案
  • 【C++面向对象侯捷】8.栈,堆和内存管理
  • 在比特币上使用可检索性证明支付存储费用
  • 使用SSE(Server-Sent Events)实现服务端给客户端发消息
  • 【Redis】使用rpm包安装redis
  • 论文阅读-Group-based Fraud Detection Network on e-Commerce Platforms
  • java程序启动时指定JVM内存参数和Xms、Xmx参数学习
  • 【C++编程能力提升】
  • FlashDuty Changelog 2023-09-21 | 自定义字段和开发者中心
  • 贪心算法-
  • 漫谈:C语言 C++ 左值、右值、类型转换
  • 前车之鉴,后车之师
  • WEB使用VUE3实现地图导航跳转
  • 今天聊一聊高性能系统架构设计是什么样的
  • 鼠标不动了怎么办?3招解决问题!
  • 2023-09-23力扣每日一题
  • C#中使用Newtonsoft.Charp实现Json对象序列化与反序列化
  • Golang开发--互斥锁和读写锁
  • Springboot 集成WebSocket作为客户端,含重连接功能,开箱即用