vue3中provide && inject的使用


Posted in Vue.js onJuly 01, 2021

与 Vue2中的 provide 和 inject 作用相同,只不过在Vue3中需要手动从 vue 中导入
这里简单说明一下这两个方法的作用:
provide :向子组件以及子孙组件传递数据。接收两个参数,第一个参数是 key,即数据的名称;第二个参数为 value,即数据的值
inject :接收父组件或祖先组件传递过来的数据。接收一个参数 key,即父组件或祖先组件传递的数据名称
假设这有三个组件,分别是 A.vue 、B.vue 、C.vue,其中 B.vue 是 A.vue 的子组件,C.vue 是 B.vue 的子组件

// A.vue
<script>
import {provide} from 'vue'
export default {
    setup() {
        const obj= {
          name: '小红书',
          age: 18
        }

        // 向子组件以及子孙组件传递名为info的数据
        provide('info', obj)
    }
}
</script>

// B.vue
<script>
import {inject} from 'vue'
export default {
    setup() { 
        // 接收A.vue传递过来的数据
        inject('info')  // {name: '小红书', age: 18}
    }
}
</script>

// C.vue
<script>
import {inject} from 'vue'
export default {
    setup() { 
        // 接收A.vue传递过来的数据
        inject('info')  // {name: '小红书', age: 18}
    }
}
</script>
Vue.js 相关文章推荐
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 #Vue.js
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
Vue实现tab导航栏并支持左右滑动功能
Vue3.0写自定义指令的简单步骤记录
vue.js Router中嵌套路由的实用示例
Jun 27 #Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
You might like
十大“创意”战术!
2020/03/04 星际争霸
PHP_MySQL教程-第一天
2007/03/18 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
小程序实现搜索框功能
2020/03/26 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
Python Http请求json解析库用法解析
2020/11/28 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
开业庆典邀请函
2014/01/08 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
中学音乐课教学反思
2016/02/18 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL