provide/inject

桃扇骨 2022-12-12 13:49 183阅读 0赞

### 概述 ###

`provide/inject`：简单的来说就是在父组件中通过`provide`来提供变量，然后在子组件中通过`inject`来注入变量。

需要注意的是这里**不论子组件有多深**，只要调用了`inject`那么就可以注入`provide`中的数据。而不是局限于只能从当前父组件的`prop`属性来获取数据。

### 写法 ###

provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性

// 传入对象写法
    provide: {
        foo: 'bar'
    }
    // 函数写法
    provide () {
        return {
          foo: 'bar'
        }
    }

inject ：一个字符串数组，或 一个对象，对象的 key 是本地的绑定名

// 父级组件提供 'foo'
    var Provider = {
      provide: {
        foo: 'bar'
      },
      // ...
    }
    
    // 子组件注入 'foo'
    var Child = {
      inject: ['foo'],
      created () {
        console.log(this.foo) // => "bar"
      }
      // ...
    }

## 实现 provide / inject 可监听 ##

**提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。**

// App.vue 组件 (父组件)
    export default {
            name: 'electron-xdf',
            data () {
                return {
                    asideW: '200px',
                    _path: null
                };
            },
            created () {
                this._path = this.$route.path;
            },
            provide() {
                return {
                    INFO: this // 传递可响应对象
                };
            },
            methods:{
                upprovide(){
                    this.asideW = '500px';  // 修改 属性值得变化，可以传递到 子孙后代的任意组件 同时响应变化
                }
            }
        }

// 子组件
    export default {
            props: {},
            computed: {},
            name: 'process-communication',
            data () {
                return {
                    count: 0
                };
            },
            inject: ['INFO'],
            methods: {
                upprovide(){
                    // 这里修改之后 App.vue 也会响应数据的变化
                    this.INFO.asideW = '200px';
                }
            }
        };

# #

## 刷新vue组件 ##

这样实现了子组件调取reload方法就实现了刷新vue组件的功能,个人认为它实现了组件跨越组件传递数据方法。

// App.vue 组件 (父组件)
    <template>
      <div
        id="app"
      >
        <router-view
          v-if="isRouterAlive"
        />
      </div>
    </template>
    
    <script>
    export default {
      name: 'App',
      components: {
        MergeTipDialog,
        BreakNetTip
      },
      data () {
        return {
          isShow: false,
          isRouterAlive: true
      },
    
    // 父组件中返回要传给下级的数据
      provide () {
        return {
          reload: this.reload
        }
      },
      methods: {
        reload () {
          this.isRouterAlive = false
          this.$nextTick(() => {
            this.isRouterAlive = true
          })
        }
      }
    }
    </script>

// 子组件
    <template>
      <popup-assign
        :id="id"
        @success="successHandle"
      >
        <div class="confirm-d-tit"><span class="gray-small-btn">{
       { name }}</span></div>
        <strong>将被分配给</strong>
        <a
          slot="reference"
          class="unite-btn"
        >
          指派
        </a>
      </popup-assign>
    </template>
    <script>
    import PopupAssign from '../PopupAssign'
    export default {
    //引用vue reload方法
      inject: ['reload'],
      components: {
        PopupAssign
      },
    methods: {
        // ...mapActions(['freshList']),
        async successHandle () {
          this.reload()
        }
      }
    }
    </script>

参考：  
[https://www.jb51.net/article/139769.htm][https_www.jb51.net_article_139769.htm]  
[https://blog.csdn.net/qq\_15253407/article/details/91490210][https_blog.csdn.net_qq_15253407_article_details_91490210]  
[https://www.jianshu.com/p/d34a7df4cd6a][https_www.jianshu.com_p_d34a7df4cd6a]

[https_www.jb51.net_article_139769.htm]: https://www.jb51.net/article/139769.htm
[https_blog.csdn.net_qq_15253407_article_details_91490210]: https://blog.csdn.net/qq_15253407/article/details/91490210
[https_www.jianshu.com_p_d34a7df4cd6a]: https://www.jianshu.com/p/d34a7df4cd6a

provide/inject

发表评论取消回复

还没有评论，来说两句吧...

相关阅读