36 多级组件传值 provide 和 inject
Posted wgchen~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了36 多级组件传值 provide 和 inject相关的知识，希望对你有一定的参考价值。
[组件] provide 和 inject 多级组件传值
创建一个多级组件
本节的要讲的关键词是 provide 和 inject，作用是进行多级组件传值的。
<!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平方的房子，不想通过儿子的手，直接传递给孙子，那如何操作那？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo36</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(
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>
</html>
多级组件传值 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 可以解决这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo36</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(
data()
return house:'北京别墅一套'
,
provide:
newHouse:'北京200平方房子一套'
,
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'],
inject:['newHouse'],
template:`
<div>我是孙子，等待接收房子</div>
<div>孙子接收house,newHouse</div>
`
)
const vm = app.mount("#app")
</script>
</html>
以上是关于36 多级组件传值 provide 和 inject的主要内容，如果未能解决你的问题，请参考以下文章
vue 父组件如何给子组件的组件传值 provide inject
Vue中provide和inject 用法（vue组件爷孙传值）