到底用prop还是事件

harryhappy 发布于2019-08-20 11:19 / 2938人阅读

摘要：组件之间数据交互，主要有和事件两种。如果所对应的任务是在父组件完成的，父组件需要将拿到的一堆数据传给时，这时可以通过事件来传递。

组件之间数据交互，主要有prop和事件两种。

prop

事件

那如何优雅的选择呢？
笔者觉得可以在数据功能上进行区分。
比如上面的场景，是由于子组件child在知道id改变后，在它自己的作用域里去执行handler()方法，handler可能是一个需要ajax获取数据并渲染到child组件上的函数(ajax在child组件中完成的)，这时候就推荐用watch来监听id的改变了。
如果handler所对应的ajax任务是在父组件完成的，父组件需要将拿到的一堆json数据传给child时，这时可以通过事件来传递。

参考

Vue+Webpack使用规范

海外云主机云服务器云服务器到底干什么用 prop() props prop

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80507.html

VUE防抖与节流的最佳解决方案——函数式组件

摘要：案例持续触发事件时，并不立即执行函数，当毫秒内没有触发事件时，才会延时触发一次函数。也以函数形式暴露普通插槽。这样的场景组件用函数式组件是非常方便的。相关阅读函数式组件自定义指令前言有echarts使用经验的同学可能遇到过这样的场景，在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的，resize事件是连续触发的这意味着echarts...

OldPanda 2019-05-22 19:08 评论0 收藏0
详解vue组件三大核心概念

摘要：前言本文主要介绍属性事件和插槽这三个基础概念使用方法及其容易被忽略的一些重要细节。至于如何改变，我们接下去详细介绍单向数据流这个概念出现在组件通信。比如上例中在子组件中修改父组件传递过来的数组从而改变父组件的状态。的一个核心思想是数据驱动。前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们...

rickchen 2019-08-23 17:51 评论0 收藏0
浅析React之事件系统（一）

摘要：合成事件的使用方式在中不会把所有的事件处理器绑定到相应的真实的节点上，而是使用一个统一的事件监听器，把所有的事件绑定在最外层。在之前开发者需要为了优化性能需要自己来优化自己的事件处理器的代码，现在帮助你完成了这些工作。大家周末好，2016年的最后几篇文章开始写到了React的一些东西，那么最近就来一些图表君对于React的简单总结和理解，那么今天就开始第一篇，说一说React的事件系...

chemzqm 2019-08-20 14:05 评论0 收藏0
[源码阅读]通过react-infinite-scroller理解滚动加载要点

摘要：看它的源码主要意义不在知道如何使用它，而是知道以后处理滚动加载要注意的东西。通过判断不为的情况，确保滚动组件正常显示和在无滚动的情况下，和相等，都为在有滚动的情况下，表示实际内容高度，表示视口高度。 react-infinite-scroller就是一个组件，主要逻辑就是addEventListener绑定scroll事件。看它的源码主要意义不在知道如何使用它，而是知道以后处理滚动加...

cikenerd 2019-08-23 13:41 评论0 收藏0
高阶组件HOC - 小试牛刀

摘要：因为这个高阶函数，赋予了普通组件一种呼吸闪烁的能力记住这句话，圈起来重点考。其实，高阶组件就是把一些通用的处理逻辑封装在一个高阶函数中，然后返回一个拥有这些逻辑的组件给你。原文地址：https://github.com/SmallStoneSK/Blog/issues/6 1. 前言老毕曾经有过一句名言，叫作国庆七天乐，Coding最快乐~。所以在这漫漫七天长假，手痒了怎么办？于是...

lookSomeone 2019-08-23 12:14 评论0 收藏0