vue-provide和inject

需求：
详情页面state，可以切换状态，根据状态变化，详情页里的一个tabs等子页面要控制是否可以编辑（层级多，不想props一层一层传参）。

provide要写成函数形式，否则获取不到this。

// 父组件：
provide(){
  return {
    /***
     * isPublished：是否已经发布；详情接口返回state，根据state判断是否已发布（async）;
     * 详情页面可以修改state值，启用或者禁用。
     */
    // 要使用对象格式，但是不是在data中的对象，不是响应式的。
    /*proObj:{
      isPublished: this.isPublished, // 直接改变值：this.isPublished
    },*/
    proObj:this.proObj,
  }
},
data(){
  isPublished: false,
  proObj:{
    isPublished:false
  },
},
// methods中，可以切换状态:isPublished.

使用：

inject:['proObj'],

// 直接使用：
<div class="table-top" v-if="!proObj.isPublished">
  <el-button type="primary" size="small" plain @click="openVisible">选择标签</el-button>
</div>

inject:['proObj'],

// 或者使用computed属性，然后直接使用isPublished。
computed: {
  isPublished(){
    return this.proObj.isPublished
  }
},

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

参考：
https://blog.csdn.net/Min_Fox/article/details/123428325

https://blog.csdn.net/weixin_43459866/article/details/114691818

https://www.cnblogs.com/vickylinj/p/13368745.html