Attrs 和 Listeners

这两个属性是 vue 2.4 版本之后提供的,它简直是二次封装组件或者说写高阶组件的神器。在我们平时写业务的时候免不了需要对一些第三方组件进行二次封装。比如我们需要基于 el-select 分装一个带有业务特性的组件,根据输入的 name 搜索用户,并将一些业务逻辑分装在其中。但 el-select 这个第三方组件支持几十个配置参数,我们当然可以适当的挑选几个参数通过 props 来传递,但万一哪天别人用你的业务组件的时候觉得你的参数少了,那你只能改你封装的组件了,亦或是哪天第三方组件加入了新参数,你该怎么办?

其实我们的这个组件只是基于 el-select 做了一些业务的封装,比如添加了默认的 placeholder,封装了远程 ajax 搜索请求等等,总的来说它就是一个中间人组件,只负责传递数据而已。

这时候我们就可以使用 v-bind="$attrs" :传递所有属性、v-on="$listeners" 传递所有方法。如下图所示:

这样,我们没有在 $props 中声明的方法和属性,会通过 $attrs$listeners 直接传递下去。这两个属性在我们平时分装第三方组件的时候非常有用!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一. Java基础部分.................................................
    wy_sure阅读 9,288评论 0 11
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,473评论 0 29
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 13,294评论 1 52
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,680评论 0 6
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 8,672评论 0 3

友情链接更多精彩内容