36. [组件]provide和inject多级组件传值
目录
本节的要讲的关键词是provide
和inject
,作用是进行多级组件传值的。
创建一个多级组件
新建一个文件Demo36.html
,写上基本代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Demo13</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script> </head> <body> <div id="app"></div> </body> <script> const app = Vue.createApp({ template: `<div>我有一套房子,我先传给我的儿子</div>` }) const vm = app.mount("#app") </script>
现在的需求是,要写一个子组件,然后子组件里调用另一个子组件(也可以想象成孙子组件),然后从最上层的父组件里传递值给子组件。
我们先来编写两个子组件的代码。
<script> const app = Vue.createApp({ data(){ return {house:'北京别墅一套'} }, template: `<div>我有一套房子,我先传给我的儿子</div> ` }) app.component('child',{ template:` <div>我是子组件,我要把房子再传给我儿子。</div> ` }) app.component('child-child',{ template:` <div>我是孙子,等待接收房子</div> ` }) const vm = app.mount("#app") </script>
基本结果和组件已经有了,下面我们看看这种情况如何传递。
常用传递方式
现在的需求就是一层层传递下去,我们可以使用props
的形式进行接收,然后继续传递,代码可以可成这样。
<script> const app = Vue.createApp({ data(){ return {house:'北京别墅一套'} }, template: ` <div>我有一套房子,我先传给我的儿子</div> <child :house="house" /> ` }) app.component('child',{ props:['house'], template:` <div>我是子组件,我要把房子再传给我儿子。</div> <div>儿子接收{{house}}</div> <child-child :house="house" /> ` }) app.component('child-child',{ props:['house'], template:` <div>我是孙子,等待接收房子</div> <div>孙子接收{{house}}</div> ` }) const vm = app.mount("#app") </script>
这时候到浏览器中查看一下结果,可以发现结果是可以成功的。每次用 props 接收,然后再用绑定属性的方式传递给下一层。
但现在需求变化了,富豪北京三环内还有一套 200 平方的房子,不想通过儿子的手,直接传递给孙子,那如何操作那?
多级组件传值 provide 和 inject
这时候就可以使用使用provide
传递和inject
接收了,先在数据项的下面声明一个provide
。
const app = Vue.createApp({ data(){ return {house:'北京别墅一套'} }, provide:{ newHouse:'北京 200 平方房子一套' }, template: ` <div>我有一套房子,我先传给我的儿子</div> <child :house="house" /> ` })
然后儿子组件不用作任何更改,直接在孙子组件里用inject
接收就可以了。
app.component('child-child',{ props:['house'], inject:['newHouse'], template:` <div>我是孙子,等待接收房子</div> <div>孙子接收{{house}},{{newHouse}}</div> ` })
写完后,可以打开浏览器中进行查看,发现孙子组件也是可以顺利接收到的。
我们学习案例的层级并不多,所以你感觉不是很强烈,如果这种层级关系达到 5-6 级,再使用props
进行传递,那就会非常麻烦,而且会有大量的代码冗余。使用provide
和inject
可以解决这个问题。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 36. [组件]provide和inject多级组件传值
码云笔记 » 36. [组件]provide和inject多级组件传值
这个好像是vue2.0的东西吧!vue3.0好像一点都没有涉及到,是我找错了,还是作者题目取错了。复习了一遍vue2.0的知识点,感谢作者大大。
这个是无Vue.x经验的学习路线(从零开始),设计一点,vue3的全部知识后期更新。你可以看这部分的https://mybj123.com/qdkfnote/vuetypescript/