vue中provide和inject多层级组件通信的用法

在父组件中定义需要传的数据

<script>
  export default {
    data(){
      return {
        id: '',
      }
    },
    provide(){
      return {
        uId: computed(()=>this.id),
      }
    }
  }
</script>

在子组件或下级组件中接收这个值

<script>
  export default {
    inject: ['uId'],  //注册接收父组件传来的数据
    data(){
      return {
        childuId: this.uId.value,   //根据父组件传来的值取其value值
      }
    },
    watch: {
      //监测uId的变化，并将改变后的值赋值给childuId，在handler中还可以进行一些其他的业务操作
      uId: {
        handler(newUId) {
          this.childuId = newUId.value;
        },
        immediate: true,
        deep: true
      }
    },
  }
</script>