Vue3-provide和inject

作用和场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

跨层传递普通数据:

1.顶层组件通过provide函数提供数据

2.底层组件通过inject函数获取数据

既可以传递普通数据,也可以使用ref传递响应式数据(顶层组件修改数据后可以响应过去)

但是底层组件不能修改顶层组件传递过来的数据,所以我们可以在顶层组件中跨层传递函数,给子孙后代传递可以修改数据的方法

顶层组件

复制代码
<script setup>
    import {provide,ref} from 'vue'
    const count=ref(100)
    provide('changeCount',(newCount)=>{
        count.value=newCount
    })
</script>

底层组件

复制代码
<script setup>
    import {inject} from 'vue'
    const changeCount=inject(changeCount)
    changeCount(1000)//可以放在点击事件上
</script>

这样就可以把父组件里的count改为1000了

相关推荐
哆啦A梦15882 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_2 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
SevgiliD3 小时前
el-table中控制单列内容多行超出省略及tooltip
javascript·vue.js·elementui
要加油哦~3 小时前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15884 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫4 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo4 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li4 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐5 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_398586545 小时前
Threejs入门学习笔记
javascript·笔记·学习