36 多级组件传值 provide 和 inject

末蓝、 2023-10-06 20:41 6阅读 0赞

#### \[组件\] 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>

现在的需求是，要写一个子组件，然后子组件里调用另一个子组件（也可以想象成孙子组件），然后从最上层的父组件里传递值给子组件。

我们先来编写两个子组件的代码。

基本结果和组件已经有了，下面我们看看这种情况如何传递。

## 常用传递方式 ##

现在的需求就是一层层传递下去，我们可以使用 `props` 的形式进行接收，然后继续传递，代码可以可成这样。

这时候到浏览器中查看一下结果，可以发现结果是可以成功的。  
每次用 `props` 接收，然后再用绑定属性的方式传递给下一层。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]

但现在需求变化了，富豪北京三环内还有一套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>
        `
    })

写完后，可以打开浏览器中进行查看，发现孙子组件也是可以顺利接收到的。

![在这里插入图片描述][d89e671fd16e4f22ac1f71cd995679cd.png]

我们学习案例的层级并不多，所以你感觉不是很强烈，如果这种层级关系达到 `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>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/bf152ee1bea940fdaf0c4919bd2f893a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[d89e671fd16e4f22ac1f71cd995679cd.png]: https://img-blog.csdnimg.cn/d89e671fd16e4f22ac1f71cd995679cd.png