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


版权声明:本文为weixin_42995876原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。