VUE2中provide 和 inject用法,以及怎么做响应式数据?

1. provide/inject说明

provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深,都可以通过inject 来访问到provide的数据.

2. provide/inject 具体用法:

三个组件: Home组件 - Provide组件 - Sun组件(最底层)
在provide 组件中:

data() {
        return {
            msg: 'Home组件的msg'
        }
    },
    components: {LeftTop, LeftCenter, ProvideC},
    provide() {
        return {
            grandpaMsg: this.msg
        }
    },

在sun组件中:

<template>
    <div class="Sun">
        sun组件
        {{ grandpaMsg }}
    </div>
  </template>
  <script>
  export default {
    data() {
        return {
        }
    },
    inject: ['grandpaMsg']
   }
  </script>

这时页面上就会展示grandpaMsg的值了,但是vue中执行顺序是

data -> provide -> created -> mounted

如果在Home组件中mounted生命周期函数中改变msg的值

mounted() {
        this.msg = 'Home组件中msg的值被改变啦'
    }

页面还是之前msg的值

这种方法传递过来的数据是没有响应性的，当你改变父组件中的msg时，子组件中接收的grandpaMsg并不会改变。.

官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

3. provide/inject 实现响应式

方法一：传递的参数用一个方法返回

父组件:

  provide() {
        return {
            grandpaMsg: () => {
                return this.msg
            }
        }
    },

子组件:

<template>
    <div class="Sun">
        sun组件
        {{ grandpaMsg() }}
    </div>
  </template>
  
  <script>

  export default {
    data() {
        return {
            
        }
    },
    components: {},
    inject: ['grandpaMsg'],
    mounted() {
       
    }
   
    
   }

方法二: 把需要传递的参数定义成一个对象

父组件:

 data() {
        return {
           obj: {
             msg: 'Home组件的msg'
           }
        }
    },
    components: {LeftTop, LeftCenter, ProvideC},
    provide() {
        return {
            grandpaMsg: this.obj
        }
    },
    mounted() {
        this.obj.msg = 'Home组件中msg的值被改变啦'
    }

子组件:

 inject: ['grandpaMsg'],

使用:

  <div class="Sun">
        sun组件
        {{ grandpaMsg.msg }}
    </div>

这样就实现Provide/Inject响应式数据了.