vue3-依赖注入

实现一个简单的依赖注入

父级

<template>
  <div>
    <hr>
    <p>父</p>
    <p>{{num}}</p>
    <button @click="addFn(1)">+1</button>
    <Son></Son>
  </div>
</template>

<script>
  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
      }
    },
  }
</script>

子级

<template>
    <div>
        <hr>
        <p>子</p>
        <p>{{num}}</p>
        <Grandson></Grandson>
    </div>
</template>

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

孙级

<template>
    <div>
        <hr>
        <p>孙</p>
        <p>{{num}}</p>
    </div>
</template>

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

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

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

<template>
  <div>
    <hr>
    <p>父</p>
    <p>{{num}}</p>
    <button @click="addFn(1)">+1</button>
    <Son></Son>
  </div>
</template>

<script>
  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
      }
    },
  }
</script>

一个包含方法的依赖注入

父组件

<template>
  <div>
    <hr>
    <p>父</p>
    <p>{{num}}</p>
    <button @click="addFn(1)">+1</button>
    <Son></Son>
  </div>
</template>

<script>
  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
      }
    }
  }
</script>

子组件

<template>
    <div>
        <hr>
        <p>子</p>
        <p>{{num}}</p>
        <button @click="addFn(2)">+2</button>
        <Grandson></Grandson>
    </div>
</template>

<script>
    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
            }
        }
    }
</script>

孙组件

<template>
    <div>
        <hr>
        <p>孙</p>
        <button @click="addFn(5)">+5</button>
        <p>{{num}}</p>
    </div>
</template>

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

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

值得注意

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

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

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