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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
springboot+VUE实现登录注册
May 27 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
详解Vue3使用axios的配置教程
Apr 29 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
php strtotime 函数UNIX时间戳
2009/01/14 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
python操作MongoDB基础知识
2013/11/01 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python里dict变成list实例方法
2019/06/26 Python
对Python函数设计规范详解
2019/07/19 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
创意广告词
2014/03/17 职场文书
代收款委托书范本
2014/10/01 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL