provide和inject的用法
1、provide与inject的功能
通过provide与inject,可以把一个祖先组件指定的数据和方法,传递给其所有子孙组件中
provide 和 inject 主要在开发高阶插件/组件库时使用.
由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据,provide和inject是成对出现的.
##2.为什么不使用父子组件props传值呢?
因为父子组件props传值需要需要知道往哪一个子组件传值,而el-form组件中会注入的子组件是不确定的。provide只需要将传递的值抛出,不需要知道使用哪一个子组件,子组件通过inject注入获取数据,也不需要知道父组件是谁,因此在封装组件库的时候很便利。而且props只能在父子组件中传值,涉及到孙组件就不可以使用了.
##3.provider/inject用法
provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量
需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。
provide:是一个对象,或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西,也就是属性和属性值。
inject:一个字符串数组,或者是一个对象。属性值可以是一个对象,包含from和default默认值,from是在可用的注入内容中搜索用的 key (字符串或 Symbol),意思就是祖父多层provide提供了很多数据,from属性指定取哪一个key;default指定默认值。
父组件:
<script>
export default {// 父组件通过provide将自己的数据以对象形式传出去provide(){return {msg:'一条信息'}}
};
</script>
子孙组件:
<script>
export default {// inject:["msg"], // 使用一个注入的值作为数据入口inject:{ //或者写成对象// 使用一个默认值使其变成可选项msg: { // 键名from: 'msg', // 来源default: '' // 默认值}}
}
</script>
小结:
这样我们就可以通过admin模板来做我们的项目了, js高程第四版链接: https://pan.baidu.com/s/18P8ky1YalApRb-HDRENZBQ 可以加公众号获取提取码.
若有不懂的地方,请加q群147936127交流或者vx: ltby52119,谢谢~
provide和inject的用法相关推荐
- vue 中provide的用法_vue中provide和inject的用法
2.2.0 新增 描述: provide 和 inject 主要为高阶插件/组件库提供用例.并不推荐直接用于应用程序代码中; 并且这对选项需要一起使用; 以允许一个祖先组件向其所有子孙后代注入一个依赖 ...
- VUE2中provide 和 inject用法,以及怎么做响应式数据?
1. provide/inject说明 provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深, ...
- Vue 3的provide和inject用法
了解Vue 3的provide和inject用法 前言 在组合式API中的用法 基本用法 前言 provide和inject在Vue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个. ...
- vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
- vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析 成对出现:provide和inject是成对出现的 作用:用于父组件向子孙组件传递数据 使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...
- vue 中provide的用法_vue中provide和inject使用
1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读 ...
- vue 中provide的用法_Vue中使用provide和inject
相信大家在工作中一定遇到过多层嵌套组件,而vue 的组件数据通信方式又有很多种. 比如vuex.$parent与$children.prop.$emit与$on.$attrs与$lisenters.e ...
- vue中provide和inject 用法
我们平时在开发的时候,最常用的父子组件通信方式就是父组件绑定要传递给子组件的数据,然后子组件通过props属性接收.但是一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便 ...
- vue3中 provide 和 inject 用法
前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时, ...
最新文章
- PYTHON之路(四)
- Consul入门02 - 运行Consul代理
- python List交集、并集、差集
- evaluate函数使用无效_我用这个Excel函数,秀了同事一脸!很多人却连它名字都没听过...
- 二值图像--形态学处理3 开操作和闭操作
- PHP会话控制考察点
- Linux type stat file
- 【Iphone 游戏开发之一】创建视图并绘制简单图形
- oracle job 与存储过程,讲解Oracle中JOB与存储过程的接合用法
- 正常访问静态文件,不要找不到静态文件报404
- 电脑老是自动重启怎么回事??
- 计算机主板 也叫系统版,电脑主板是什么
- Python 2与Python 3对H5牌九棋牌搭建的区别
- SDPT3 4.0版——半正定二次线性规划的Matlab软件
- Linux不能连接蓝牙音箱,【搁浅St|开发日记】彻底解决dueros连接蓝牙音箱的问题...
- PLC抑制干扰电路的设计
- centos7下升级GLIBC2.31
- 嵌入式linux安装dropbear
- 阿里云部署Django项目
- navcat导入mysql bak_navcat excel数据导入mysql的方法
热门文章
- android 强制垃圾回收,Android垃圾回收(GC)
- 【常用的linux、doctor、maven、gradle、adb、window命令总结】
- 为什么加泪滴,Allegro如何加泪滴?
- 滚动轴承故障特征频率计算公式
- 达梦DM数据库—线上培训学习简记
- android图片涂鸦(标记)
- VS2017登陆失败:我们无法刷新此账户的凭证、我们无法添加此账户发送请求时出错、评估期已结束,请登录以解除产品锁定
- ad如何计算电路板的pin数量_各类EDA软件统计pin数方法
- ansys经典界面分析工字钢_工字钢_ANSYS实例分析72道(含结果)
- Java中角度和弧度的转换,三角函数,反三角函数