文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端开发中父链和子链方式实现通信

2023-06-04 23:23

关注


父链和子链是一种父子间组件通信的新方式。

概念

父链:

在子组件中,使用this.$parent可以直接访问该组件的父实例或组件,【类似于原生或者jquery中获取父节点的方式,但是并没有操作dom】

子链:

在父组件中,使用this.$children访问它所有的子组件,当子组件较多时可以通过子组件索引名称来实现查找。【类似于原生或者jquery中获取子节点的方式】

说明

this.$parent与this.$children可以无限的向上或向下访问,直到根实例或最内层组件。

然后由于子组件可以有多个,this.$children获取子组件时,获取的是一个数组,要给其下标才能获取到具体的某一个子组件。

这时操作起来不是很方便,此时我们就可以使用:子组件索引的方式实现获取具体子组件

父链实例

web前端开发中父链和子链方式实现通信

子链实例

web前端开发中父链和子链方式实现通信

子组件索引实例

给子组件定义索引时,需要在子组件调用标签上使用ref属性定义,如:

web前端开发中父链和子链方式实现通信

然后在父组件中获取时,通过this.$refs.refName的方式获取具体的子组件,然后.$refs只在组件渲染完成后才会充填。

web前端开发中父链和子链方式实现通信

this.$refs.sub2.submes = "来自父组件的信息--sub2";

web前端开发中父链和子链方式实现通信

由于$refs是非响应式的,所以他仅仅作为直接访问子组件的一个应急方案。应当避免在计算属性或者模板中使用$refs.

父链和子链总结

父链与子链的父子组件通信方式非常相似与传统的dom节点通信方式,当然他仍然没有去操作dom节点,他操作的仍然是数据。

不过这种方式会让父子组件间出现 紧耦合 很难看清他们的状态,因为他随时可能会被任意组件修改,所以这种方式并不推荐!

父子组件通信最好还是使用props与【自定义事件+$emit】的方式来通信。

跨级组件间的通信还是使用中央事件总线的方式实现通信。【bus.$emit(),bus.$on()】

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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