中英文网站是咋做的,福州网站建设推广公司,株洲网站排名优化价格,遵义网约车平台哪家好一、注意点 专门强调了是3.0且是组合式#xff0c;不是2.0不支持也不是选项式不支持provideinject#xff0c;是支持但是有很明显的弊端#xff0c;不建议使用
二、场景
官方的解释: 通常情况下#xff0c;当我们需要从父组件向子组件传递数据时#xff0c;会…一、注意点 专门强调了是3.0且是组合式不是2.0不支持也不是选项式不支持provideinject是支持但是有很明显的弊端不建议使用
二、场景
官方的解释: 通常情况下当我们需要从父组件向子组件传递数据时会使用props想象一下这样的结构有一些多层级嵌套的组件形成了一颗巨大的组件树而某一个深层的子组件需要一个较远的祖先组件中的部分数据在这种情况下如果仅使用props则必须将其沿着组件链逐级传递下去这会非常麻烦provide(供给)和reject(注入)可以帮助我们解决这个问题。
简单来说: 后代组件无论是多后代的组件想使用祖先的数据可以不用一级一级的传递数据只需要在祖先组件使用provide以及需要使用这个数据的后代组件reject注入即可。
三、普通注入
先说一下组件结构: APP.vue-parentView.vue-childView.vue
(parentView.vue中的内容不在写出来就是单纯的引入childView.vue组件)
APP.vue import { ref, provide } from vue imort ParentView from ./parentView.vue const message ref(1111) provide(message, message) input / ParentView / childView.vue import { inject } from vue // 1、正常获取供给值 const meassageEnd inject(message) // 2、添加默认值防止供给值不存在报警告 const messageEnd inject(message, 2222) // 3、添加默认值防止供给值不存在报警告通过函数或者初始值设定 const messageEnd inject(message, (){ return 0000 }, true) {{message}} // input的值更改的时候这里会同步响应 四、注入方组件中更改数据
APP.vue import { ref, provide } from vue import ParentView from ./parentView.vue const message ref(1111) const clickFun () { message.valuenew value } provide(messageAccept, { message, clickFun }) input v-modelmessage / ParentView childView.vue import { inject } from vue const { mssage, clickFun } inject(messageAccept) {{message}} div clickclickFun/div
