关于vue子孙组件之前传值的使用 provide 和 inject

有些情况需要跨多层组件传值 多次调用父传子就太麻烦了 就要使用 provide 和 inject

最外层父组件

和data method这些同级

 provide() {
    return {
      setLeftCompany: this.setLeftCompany,
      setVacateData: this.setVacateData,
      rightCompanyChange: this.rightCompanyChange,
      chosePopShow: ()=>this.popShow = false,
    }
  },

孙组件

和data method这些同级

inject: ['rightCompanyChange'], //接受属性

调用 直接在祖先组件内运行方法
 methods: {
    selectCompany(item) {
      this.rightCompanyChange(item)
    }
  }

##补充关于子孙组件调用祖先组件data的写法

祖先组件
//streetId为data内的数据
 provide() {
    return {
      streetId: () => this.streetId
    }
  },
  
  
 子孙组件 调用
  inject: ['streetId'],
  computed: {
   globalStreedId() {
     return this.streetId()
   }
 },
  watch: {
    globalStreedId(newVal, oldVal) {
      // alert("变化")
      //this.init()
    }
  },