文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue高级组件之provide与inject使用及说明

2023-05-17 08:58

关注

vue provide与inject使用及说明

vue中不同组件通信方式如下

 通常是以上两种情况,然而还有一种比较特殊的情况,即孙子组件或更深层次的组件通信

1.下面是a.vue

<template>
    <div class="test">
        <son prop="data"></son>
    </div>
</template>

2.下面是son.vue

<template>
    <div>
        <grandson prop="data"></grandson>
    </div>
</template>
 
<script>
export default {
    name: 'Son',
    props: ['data'],
}
</script>

很容易看出,如果父组件需要与grandson通信,除了vuex,必须先与son组件通信,再由son与grandson通信,在层级比较少的情况下也无可厚非,但是层级一旦多起来是很可怕的

有人会问为什么不用vuex,简单省事,有很多为了这个引入vuex会导致代码性价比比较低,项目本身没有使用vuex的必要

那么这种情况下provide / inject就登场了

因为以上两者可以在父组件与子组件、孙子组件、曾孙子...组件数据交互,也就是说不仅限于prop的父子组件数据交互,只要在上一层级的声明的provide,那么下一层级无论多深都能够通过inject来访问到provide的数据

1.父级组件如下

<template>
    <div class="test">
        <son prop="data"></son>
    </div>
</template>
 
<script>
export default {
    name: 'Test',
    provide: {
        name: 'Garrett'
    }
}

2.孙子组件,注意这里是孙子组件,父级 -> 子组件 -> 孙子组件三个层级关系

<template>
    <div>
        {{name}}
    </div>
</template>
 
<script>
export default {
    name: 'Grandson',
    inject: [name]
}
</script>

这里可以通过inject直接访问其两个层级上的数据,其用法与props完全相同,同样可以参数校验等

缺点

这么做也是有明显的缺点的,在任意层级都能访问导致数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了,因此这个属性通常并不建议使用能用vuex的使用vuex,不能用的多传参几层,但是在做组件库开发时,不对vuex进行依赖,且不知道用户使用环境的情况下可以很好的使用

vue3中父子组件传值(provide/inject)

在vue3中的父子组件一般都用provide 和 inject 传值

父组件中引入和注册了子组件之后

在script标签下引入provide就可以将父组件中的变量或方法传递出去

在子组件中就可以用inject来接收一下 不管子组件的层级有多深都可以接收到

具体操作

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯