vue3中 provide 和 inject 用法小结

provide:{
 info:"值"
}

provide(){
 return{
  info: this.msg
 }
}

inject: [ 'info' ]

export default{
 provide:{
  info:"提供数据"
 }
}

export default{
 inject:['info'],
 mounted(){
     console.log("接收数据：", this.info) // 接收数据：提供数据
 }
}

import { provide } from "vue"
export default {
  setup(){
    provide('info',"值")
  }
}

import { inject } from "vue"
export default {
  setup(){
    inject('info',"设置默认值")
  }
}

<script>
import { provide } from "vue"
export default {
  setup(){
    provide('info',"值")
  }
}
</script>

<template>
 {{info}}
</template>
<script>
import { inject } from "vue"
export default {
  setup(){
    const info = inject('info')
    return{
      info
    }
  }
}
</script>

//父组件代码
<template>
  <div>
    info：{{info}}
    <InjectCom ></InjectCom>
  </div>
</template>
<script>
import InjectCom from "./InjectCom"
import { provide,readonly,ref } from "vue"
export default {
  setup(){
    let info = ref("今天你学习了吗？")
    setTimeout(()=>{
      info.value = "不找借口，立马学习"
    },2000)
    provide('info',info)
    return{
      info
    }
  },
  components:{
    InjectCom
  }
}
</script>

// InjectCom 子组件代码
<template>
 {{info}}
</template>
<script>
import { inject } from "vue"
export default {
  setup(){
    const info = inject('info')
    setTimeout(()=>{
      info.value = "更新"
    },2000)
    return{
      info
    }
  }
}
</script>