MintUI中Field组件的@blur失效问题

最新推荐文章于 2024-08-15 19:07:35 发布

嗷呜~嗷呜~呜呜~

最新推荐文章于 2024-08-15 19:07:35 发布

阅读量446

点赞数

分类专栏： Vue JavaScript 文章标签： ui

本文链接：https://blog.csdn.net/weixin_63712639/article/details/122878863

版权

JavaScript 同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

Vue

18 篇文章 0 订阅

订阅专栏

本文详细解释了在Vue中为何直接在mt-field组件上使用@blur事件无效，原因是Vue将其视为自定义事件。为捕获input标签的原生blur事件，需要添加.native修饰符，确保事件被正确处理。通过这个例子，深入理解Vue中如何处理原生与自定义事件的区别。

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

<mt-field @blur.native.capture="checkName"></mt-field>
<mt-field @focus.native.capture="checkName"></mt-field>

为什么mt-field组件直接添加@blur无效, 因为会被vue当做是mt-field组件的一个自定义事件. 这种事件需要在子组件内部使用$emit()主动触发才可以执行. 而我们需要捕获的是input标签的原生blur事件, 所以需要告诉vue, 把blur当做原生事件来看待, 所以需要添加.native事件修饰符.