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.mzph.cn/news/87466.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

代码随想录第34天 | 343. 整数拆分 96.不同的二叉搜索树

343. 整数拆分 /*** param {number} n* return {number}*/ var integerBreak function(n) {let dpnew Array(n1)dp.fill(1)for(let i3;i<n;i)for(let j1;j<i/2;j){dp[i] max(dp[i],max(j*(i-j),dp[i-j]*j))} function max(a,b){return a>b?a:b }return dp[n] }; 想…

Linxu下c语言实现socket+openssl数据传输加密

文章目录 1. Socket连接建立流程2、SocketSSL的初始化流程3、初始化SSL环境&#xff0c;证书和密钥4、SocketSSL 的c语言实现4.1 编写SSL连接函数4.2 编写加密服务端server.c4.3 编写加密客户端client.c 5、使用tcpdump检验源码获取 在进行网络编程的时候&#xff0c;我们通常使…

给出一个数组,分析当下的位置他左边有几个比他上的。

给出一个数组&#xff0c;分析当下的位置他左边有几个比他上的。 6 4 3 0 5 1 2 0 0 0 3 1 2 #include<iostream> using namespace std;int cnt(int arr[], int idx) {if (idx 0) {return 0;}int s 0;for (int i 0; i < idx; i)if (arr[i] < arr[idx])s 1;ret…

【BUG】循环中重复使用对象一定要注意

“ 有时候博客内容会有变动&#xff0c;首发博客是最新的&#xff0c;其他博客地址可能未同步&#xff0c;请认准https://blog.zysicyj.top ” 首发博客地址 文章更新计划 系列文章地址 报错内容 报错信息显示ID重复。 原因分析 在最终添加的方法中&#xff0c;出现了重复ID的报…

体育运动模板推荐

最近的朋友圈一半是晒国庆城市布置的美景的&#xff0c;一半当然就是杭州亚运会了。目前杭州亚运会正在如火如荼的进行中&#xff0c;绝美的开幕式&#xff0c;运动健儿们奋力拼搏的精神&#xff0c;在杭州亚运会的舞台上&#xff0c;每个人都是独一无二的英雄。亚运会的舞台&a…

C语言学习(1)—— 环境安装和配置

运行C语言和C程序需要安装MinGW和VSCode。 一. 安装MinGW 1、进入官网下载MinGW&#xff1a;https://sourceforge.net/projects/mingw-w64/files/ 2、解压缩 3、配置环境变量 4、检查是否安装成功 二. 安装VSCode 1、进入官网下载VSCode&#xff1a;https://code.visualstud…

Frp内网穿透

Frp简介 Frp 是一个专注于内网穿透的高性能的反向代理应用&#xff0c;支持 TCP、UDP、HTTP、HTTPS 等多种协议。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。 Frp工作原理&#xff1a; 服务端运行&#xff0c;监听一个主端口&#xff0c;等待…

如何扫描MSI安装文件的路径

今天有个需求&#xff0c;需要扫描已经安装应用, 其中有个华云桌面 其中的UninstallString 值是 MsiExec.exe /X{D20A661B-0CBA-4DE3-A1F6-353D8153725D} 无法直接获取其安装目录&#xff0c; MsiGetProductInfoW 等API INSTALLPROPERTY_INSTALLLOCATION 也不好使 自己写一个…

使用Velodyne传感器生成的点云进行快速且稳健的聚类处理:一个C++实践指南

一、引言 点云数据在现今的自动驾驶、机器人以及三维建模领域中扮演着越来越重要的角色。其中&#xff0c;Velodyne传感器作为业内知名的激光雷达产品&#xff0c;其生成的点云数据质量上乘。然而&#xff0c;对于这样的数据进行有效、快速、稳健的聚类处理仍是一个挑战。本文…

01贪心:算法理论知识

贪心&#xff1a;01算法理论知识 什么是贪心 贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 这么说有点抽象&#xff0c;来举一个例子&#xff1a; 例如&#xff0c;有一堆钞票&#xff0c;你可以拿走十张&#xff0c;如果想达到最大的金额&#xff0…

leetcode345. 反转字符串中的元音字母 【简单题】

简单题竟然想了一个小时&#xff0c;呜呜 题目 给你一个字符串 s &#xff0c;仅反转字符串中的所有元音字母&#xff0c;并返回结果字符串。 元音字母包括 a、e、i、o、u&#xff0c;且可能以大小写两种形式出现不止一次。 示例 1&#xff1a; 输入&#xff1a;s "h…

YTM32的LINFlexD实现UART功能详解

文章目录 引言简介原理与机制同UART模式相关的寄存器时钟与波特率数据缓冲区发送过程接收过程 软件参考文献 引言 初看YTM32B1ME的手册时&#xff0c;一眼看上去&#xff0c;竟然没有找到UART模块的章节&#xff0c;心想这车规MCU的产品定义也太激进了&#xff0c;直接把工业和…

Vue之vue-cli搭建SPA项目

目录 ​编辑 前言 一、vue-cli简介 1. 什么是vue-cli 2. vue-cli的重要性 3. vue-cli的应用场景 二、Vue-cli搭建SPA项目 1. 构建前提&#xff08;node.js安装完成&#xff09; 2. 安装vue-cli 3. 使用脚手架vue-cli(2.X版)来构建项目 4. 分析创建spa项目的八个问题 …

Rust 学习笔记

Rust 学习笔记 Hello world 代码一 fn main() { // 在这里编写你的 Rust 代码 println!("Hello world!"); } 什么是Rust 语言&#xff1f; Rust是一门系统编写语言 &#xff0c;专注于安全 &#xff0c;尤其是并发安全&#xff0c;支持函数式和命令式等编程…

基于规则架构-架构案例2019(三十九)

电子商务 某电子商务公司为了更好地管理用户&#xff0c;提升企业销售业绩&#xff0c;拟开发一套用户管理系统。该系统的基本功能是根据用户的消费级别、消费历史、信用情况等指标将用户划分为不同的等级&#xff0c;并针对不同等级的用户提供相应的折扣方案。在需求分析与架…

axios添加缓存请求,防止多次请求,单页面多个同一组件造成多次请求解决方案

在axios中&#xff0c;添加 const cacheMap {};响应拦截添加 try {// 删除缓存const api res.config.url.replace(process.env.VUE_APP_BASE_API, "");if (cacheMap.hasOwnProperty(api)) {delete cacheMap[api];}} catch (err) {}创建两个请求方法 /*** Get缓存…

计算机网络相关知识点(二)

TCP如何保证传输过程的可靠性&#xff1f; 校验和&#xff1a;发送方在发送数据之前计算校验和&#xff0c;接收方收到数据之后同样需要计算&#xff0c;如果不一致&#xff0c;那么代表传输有问题。 确认应答序&#xff0c;序列号&#xff1a;TCP进行传输时数据都进行了编号…

PTA 睡前速刷(C++ Java)

1167 Cartesian Tree 题意&#xff1a;要的大概就是&#xff1a;中序 -> 数组序&#xff08;层序遍历&#xff09;&#xff0c;中序不能唯一确定&#xff0c;但本题有前置添加&#xff1a;该二叉树是小顶堆 思考&#xff1a;那么最小的数值&#xff0c;一定是顶根&#xf…

Vue2+ElementUI 静态首页案例

源码 <template><div class"app-container home"><el-row type"flex" justify"space-around" class"row-bg"><el-card class"box-card cardDiv1"><el-col :span"5"><div clas…

小程序自定义tabbar,中间凸起

微信小程序自带tabbar&#xff0c;但无法实现中间按钮凸起样式和功能&#xff0c;因此按照设计重新自定义一个tabbar 1、创建tabbar文件&#xff0c;与pages同级创建一个文件夹&#xff0c;custom-tab-bar,里面按照设计图将底部tabbar样式编写 <view class"tab-bar&q…