【vue3】provide + inject的使用

父子传参的方法不仅仅使用props还有provide + inject；之前又说过props的方法，今天主要浅说下provide + inject；

父组件中使用 provide ； 子组件中使用 inject

<script setup>
    // 父组件中
    import { ref,provide} from 'vue'

    // 提供静态值
    provide('static', 'count')

    // 提供响应式的值
    const count = ref(0)
    provide('count', count)

    // 传递一个函数
    provide('getCount', () => { 
        return count;
    });
</script>

<script setup>
    // 子组件中
    import { inject , onMounted } from 'vue'
 
    // 注入值的默认方式
    const static= inject('static')
 
    // 注入响应式的值
    const count = inject('count')

    // 获取函数的值
    const getCount= inject('getCount')
    onMounted(() => {
        const count= getCount();

        console.log('拿到了对象', count);
    });
</script>

那么问题来了，props 和 provide 分别在什么时候用呢？

父组件下的很多个子组件中都使用了一个参数，或者父组件下面有很多的孙组件（子组件下面在使用子组件，在使用子组件）这种情况，

如果使用props 的话会有很多个参数传递来传递去，很有可能会弄错，从而出现问题；使用provide组合会好很多；

provide 组合在父组件中注入一次，那么在该父组件下的所有子组件和孙组件都可能获取到这个注入的值。

简单的一个父组件，一个子组件的使用props就会方便很多