[组件] provide 和 inject 多级组件传值
创建一个多级组件
- 创建一个多级组件
- 常用传递方式
- 多级组件传值 provide 和 inject
本节的要讲的关键词是 provide 和 inject，作用是进行多级组件传值的。
DOCTYPE html>
Demo13
const app = Vue.createApp({
template: `我有一套房子，我先传给我的儿子`
})
const vm = app.mount("#app")
现在的需求是，要写一个子组件，然后子组件里调用另一个子组件（也可以想象成孙子组件），然后从最上层的父组件里传递值给子组件。
我们先来编写两个子组件的代码。
const app = Vue.createApp({
data(){
return {house:'北京别墅一套'}
},
template: `我有一套房子，我先传给我的儿子 `
})
app.component('child',{
template:`
我是子组件，我要把房子再传给我儿子。
`
})
app.component('child-child',{
template:`
我是孙子，等待接收房子
`
})
const vm = app.mount("#app")
基本结果和组件已经有了，下面我们看看这种情况如何传递。
常用传递方式现在的需求就是一层层传递下去，我们可以使用 props 的形式进行接收，然后继续传递，代码可以可成这样。
const app = Vue.createApp({
data(){
return {house:'北京别墅一套'}
},
template: `
我有一套房子，我先传给我的儿子
`
})
app.component('child',{
props:['house'],
template:`
我是子组件，我要把房子再传给我儿子。
儿子接收{{house}}
`
})
app.component('child-child',{
props:['house'],
template:`
我是孙子，等待接收房子
孙子接收{{house}}
`
})
const vm = app.mount("#app")
这时候到浏览器中查看一下结果，可以发现结果是可以成功的。 每次用 props 接收，然后再用绑定属性的方式传递给下一层。
但现在需求变化了，富豪北京三环内还有一套200平方的房子，不想通过儿子的手，直接传递给孙子，那如何操作那？
DOCTYPE html>
Demo36
const app = Vue.createApp({
data(){
return {house:'北京别墅一套'}
},
template: `
我有一套房子，我先传给我的儿子
`
})
app.component('child',{
props:['house'],
template:`
我是子组件，我要把房子再传给我儿子。
儿子接收{{house}}
`
})
app.component('child-child',{
props:['house'],
template:`
我是孙子，等待接收房子
孙子接收{{house}}
`
})
const vm = app.mount("#app")
这时候就可以使用使用 provide 传递和 inject 接收了，先在数据项的下面声明一个provide。
const app = Vue.createApp({
data(){
return {house:'北京别墅一套'}
},
provide:{
newHouse:'北京200平方房子一套'
},
template: `
我有一套房子，我先传给我的儿子
`
})
然后儿子组件不用作任何更改，直接在孙子组件里用 inject 接收就可以了。
app.component('child-child',{
props:['house'],
inject:['newHouse'],
template:`
我是孙子，等待接收房子
孙子接收{{house}},{{newHouse}}
`
})
写完后，可以打开浏览器中进行查看，发现孙子组件也是可以顺利接收到的。
我们学习案例的层级并不多，所以你感觉不是很强烈，如果这种层级关系达到 5-6 级，再使用 props 进行传递，那就会非常麻烦，而且会有大量的代码冗余。
使用 provide 和 inject 可以解决这个问题。
DOCTYPE html>
Demo36
const app = Vue.createApp({
data(){
return {house:'北京别墅一套'}
},
provide:{
newHouse:'北京200平方房子一套'
},
template: `
我有一套房子，我先传给我的儿子
`
})
app.component('child',{
props:['house'],
template:`
我是子组件，我要把房子再传给我儿子。
儿子接收{{house}}
`
})
app.component('child-child',{
props:['house'],
inject:['newHouse'],
template:`
我是孙子，等待接收房子
孙子接收{{house}},{{newHouse}}
`
})
const vm = app.mount("#app")
