【vue3】provide + inject的使用

最新推荐文章于 2024-09-23 13:58:44 发布

小小的杰茜

最新推荐文章于 2024-09-23 13:58:44 发布

阅读量415

点赞数

分类专栏： vue3.0 文章标签： servlet java jvm

本文链接：https://blog.csdn.net/m0_53584457/article/details/126399295

版权

vue3.0 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文探讨了Vue中父子组件通信的两种方式：props和provide/inject。props适合简单的父向子单向数据流，而provide/inject则允许祖先组件向所有子孙组件提供值，避免深层组件 prop 传递的复杂性。通过示例代码展示了provide/inject的用法，并指出在多级组件通信中它的优势。

摘要由CSDN通过智能技术生成

父子传参的方法不仅仅使用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就会方便很多