vue3之provide(提供)与inject(注入)

更新时间:2023-07-02 10:24:54 阅读: 评论:0

元旦来历vue3之provide(提供)与inject(注⼊)
作⽤: ⼀个组件往往嵌套这更多的⼦组件,⽽这些⼦组件也许还有他们各⾃的⼦孙组件,这时如果我们还使⽤props⽅式来传值可能太过复杂和不利于维护,⽽这两个api就提供了更⽅便的传值⽅式,⽆论你的组件嵌套有多深,只要你在⽗组件定义了provide,那么在⼦孙组件调⽤inject就可拿到provide所在⽗组件定义的值,所以他们是成对出现
使⽤
// ⽗组件
import{ ref,provide }from'vue';
// provide()接受两参数(name: string,data: 传递的数据)
健康果蔬汁tup(){
let init =ref(1);
function change(){
红梅苏轼
init.value +=1
}
provide('init',init)
provide('update',change)// 数据响应式的关键,修改数据的⽅法也要⼀应传递下去,否则会不响应
return{
change,init
}
}
// ⼦组件
女生怎么安慰import{ inject,readonly }from'vue';
评语怎么写
// inject()接收两个参数(name: 要接受provide的name,data: 可不填,默认的数据)
tup(){原来是这样作文
const oneInit =inject('init')// 接收上⽅传递下来的数据
const updateUr =inject('updatea1',readonly(oneInit))
// 接收⽅法,readonly只读,以免外在原因修改了数据
return{
oneInit,体谅
updateUr
}
李彦宏资产}

本文发布于:2023-07-02 10:24:54,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/1073927.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:数据   组件   关键   修改   参数
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图