Vue中provide和inject 用法

1.概念

成对出现：provide和inject是成对出现的
　　作用：用于父组件向子孙组件传递数据
　　使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。
　　使用场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据
2.简单来说
　　provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量
　　需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

父组件定义：

<script>
export default {
  // 父组件通过provide将自己的数据以对象形式传出去
  provide(){
    return {
      parentValue:"我是父组件的值啊"
    }
  }
};
</script>

子孙组件接受方式：

<script>
export default {
  // inject:["parentValue"], // 使用一个注入的值作为数据入口：
  inject:{
    // 使用一个默认值使其变成可选项
    parentValue: { // 健名
      from: 'parentValue', // 来源
      default: 'parentValue' // 默认值
    }
  }
}
</script>

注意：provide并不是响应式的，当子组件inject的时候已经丢失了响应式功能

3.希望整个数据都是响应式的—provide提供一个函数。

函数内部返回一个响应式的数据。此时整条数据的响应式的状态并不会丢失。

//父组件传值的定义个回调函数
provide() {
            return {
                getConfig: () => ({
                    liveConfig: this.liveConfig,
                    roomConfig: this.roomConfig,
                    currentTime: this.currentTime,
                    loginUserInfo: this.loginUserInfo,
                    isLiving: this.isLiving,
                }),
            };
}

//子组件用计算属性取值，watch监听
computed: {
    actConfig() {
      return this.getConfig();
    },
  },
  watch: {
    actConfig(val) {
      console.log("组件监听到的值", val);
      this.tabInfo = val.liveConfig.tabInfo;
      this.activityList = val.liveConfig.listTab;
      this.isLiving = val.isLiving;
      this.loginUserInfo = val.loginUserInfo;
      this.currentTime = val.currentTime;
    },
  }

这样做有一个好处，即无法直接修改computedProperty的值，因为他是一个计算属性。这样就可以避免数据的混乱。