用这招监听 Vue 的插槽变化

作者:Dmitri Pavlutin
译者:前端小智
来源:Dmitri Pavlutin

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

最近,每当组件的内容(插槽、子组件等)发生变化时,我需要更新它的状态。对于上下文,它是一个表单组件,用于跟踪其输入的有效性状态。

下面的代码片段是以Options API格式编写的,但除了指定的地方外可以在Vue2 和 Vue2中使用。

开始

先从控制表单状态开始,根据状态修改一个类,孩子内容使用填充:



为了更新isInvalid属性,我们需要添加一个触发的事件,可以使用 sumit 事件 ,但我更喜用 input 事件。

表单事件7个: focus, blur, input, select, change, reset, submit 等,具体详解看这篇文章: https://blog.csdn.net/qq_4379...

表单不会触发 input 事件,但我们可以使用 "事件委托"。我们将监听器附加到父元素(

)上,当事件发生在它的子元素(