vue3-依赖注入

实现一个简单的依赖注入

父级

  
    
    父
    {{num}}
    +1
    
  



  import {reactive,toRefs, provide} from 'vue'
  import Son from "./components/Son";
  export default {
    name: 'App',
    components:{
      Son
    },
    setup(){
      const state = reactive({
        num: 2
      })
      provide('num',state.num)
      const addFn = (n)=>{
        state.num += n
      }
      return {
        ...toRefs(state),
        addFn
      }
    },
  }

子级

    
        
        子
        {{num}}
        
    



    import Grandson from "./Grandson";
    import {inject} from 'vue'
    export default {
        name: "Son",
        components: {
            Grandson
        },
        setup(){
            const num = inject('num', '-1');
            return {
                num
            }
        }
    }

孙级

    
        
        孙
        {{num}}
    



    import {inject} from 'vue'
    export default {
        name: "Grandson",
        setup(){
            const num = inject('num', '-1');
            return {
                num
            }
        }
    }

这种情况下它的数据并不是响应的

如果我们把state换成ref，就会是响应式的 父

  
    
    父
    {{num}}
    +1
    
  



  import {reactive,toRefs, provide, ref} from 'vue'
  import Son from "./components/Son";
  export default {
    name: 'App',
    components:{
      Son
    },
    setup(){
      const state = reactive({
        //num: 2
      })
      const num = ref(2)
      provide('num', num)
      const addFn = (n)=>{
        num.value += n
      }
      return {
        ...toRefs(state),
        num,
        addFn
      }
    },
  }

一个包含方法的依赖注入

父组件

  
    
    父
    {{num}}
    +1
    
  



  import {reactive,toRefs, provide, ref, readonly} from 'vue'
  import Son from "./components/Son";
  export default {
    name: 'App',
    components:{
      Son
    },
    setup(){
      const state = reactive({
        // num: 2
      })
      const num = ref(2)
      provide('num', readonly(num))
      const addFn = (n)=>{
        num.value += n
      }
      provide('addFn', addFn)
      return {
        ...toRefs(state),
        addFn
      }
    }
  }

子组件

    
        
        子
        {{num}}
        +2
        
    



    import Grandson from "./Grandson";
    import {inject} from 'vue'
    export default {
        name: "Son",
        components: {
            Grandson
        },
        setup(){
            const num = inject('num', '-1');
            const addFn = inject('addFn');
            return {
                num,
                addFn
            }
        }
    }

孙组件

    
        
        孙
        +5
        {{num}}
    



    import {inject} from 'vue'
    export default {
        name: "Grandson",
        setup(){
            const num = inject('num', '-1');
            const addFn = inject('addFn');
            return {
                num,
                addFn
            }
        }
    }

以上代码实现了依赖注入的响应

值得注意

1、可以在子组件直接修改注入进来的变量，但是官方并不推荐这样，这样会导致混乱，所以普遍都会在注入过程中加个readonly让他只读

2、要达到响应式，值必须是ref定义的，不能是state.xxx，否则非响应式

3、对于依赖注入的方法，注入必须要在声明之后，这是正常的代码执行顺序