唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > 说说Vue.js中vm.$attrs、$listeners的实际用法

说说Vue.js中vm.$attrs、$listeners的实际用法

2019-06-28 分类:Vue.js专区 作者:管理员 阅读(247)

$attrs?是不是有点熟悉又略显陌生,萧亚轩的一首《最熟悉的陌生人》送给你,哈哈。看到attr,肯定第一反应,这货就是跟属性东西相关了,我也不知道怎么去给大家接地气的讲解,官方文档说的很拗口,我第一次也没看懂,于是我在网上找到一个很说明问题的案例,相信你一看就知道,哦,原来我们经常用的组件中就是通过这个东西去实现的呀,先看下面一段官方拗口说明

官方解释

2.4.0 新增,包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

官方鸟语我不懂

官方只是提点,看不懂,云里雾里,什么鬼玩意儿,尤其后面那句可以通过 v-bind="$attrs"传入内部组件,到底是怎么个传法,懵逼。这就要上大谷歌小百度找我们前端界吃饱撑着大们门去发掘解析给我们听了,还真找到个比较经典案例,如下:

以下是element-ui input源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<input
  :tabindex="tabindex"
  v-if="type !== 'textarea'"
  class="el-input__inner"
  v-bind="$attrs"
  :type="type"
  :disabled="inputDisabled"
  :readonly="readonly"
  :autocomplete="autoComplete || autocomplete"
  :value="currentValue"
  ref="input"
  @compositionstart="handleComposition"
  @compositionupdate="handleComposition"
  @compositionend="handleComposition"
  @input="handleInput"
  @focus="handleFocus"
  @blur="handleBlur"
  @change="handleChange"
  :aria-label="label"
>
el-input的props源码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
props: {
  value: [String, Number],
  size: String,
  resize: String,
  form: String,
  disabled: Boolean,
  readonly: Boolean,
  type: {
    type: String,
    default: 'text'
  },
  autosize: {
    type: [Boolean, Object],
    default: false
  },
  autocomplete: {
    type: String,
    default: 'off'
  },
  /** @Deprecated in next major version */
  autoComplete: {
    type: String,
    validator(val) {
      process.env.NODE_ENV !== 'production' &&
        console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
      return true;
    }
  },
  validateEvent: {
    type: Boolean,
    default: true
  },
  suffixIcon: String,
  prefixIcon: String,
  label: String,
  clearable: {
    type: Boolean,
    default: false
  },
  tabindex: String
}
我们怎么使用el-input的
1
2
<el-input maxlength="5" minlength="2">
</el-input>

啊,看到这么大一坨代码,是不是更懵逼,别怕,你别跑,听我说完,这么多代码都是障眼法,我们只看核心。组件使用中我们加了2个原生属性,这2个原生属性并没有在prop里面,这2个属性是控制input的最大输入和最小输入长度的,那么这2个属性现在仅仅放在了父元素上,如何将其传递给素内的原生input子元素呢?不传递则这2个属性不起作用,因为子input上没有这2个属性。答案就是通过v-bind="$attrs"来实现,它将父元素所有非prop的特性都绑定在了子元素input上,否则还得在props里声明maxlength,minlength,代码量增大。这就是$attrs的使用。对应的还有$listeners,包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

最后别忘了官方括号那段话,class和style是不会被继承的,用脑子想想就知道,这要是被继承,那还得了,页面不都得乱套了。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(1) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
1

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

共有 2 条评论 - 说说Vue.js中vm.$attrs、$listeners的实际用法

  1. 万花 Windows 7 搜狗浏览器 2.X

    最近有点勤快哦,高产似母猪!

    1. 管理员 Windows NT Chrome 57.0.2987.98

      @万花毕竟我现在也是坐拥千人粉的一方小诸侯,怎可对我忠臣子民失望,哈哈

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 220 篇
  • 草稿数目: 0 篇
  • 分类数目: 14 个
  • 独立页面: 6 个
  • 评论总数: 969 条
  • 链接总数: 13 个
  • 标签总数: 406 个
  • 建站时间: 950 天
  • 注册用户: 1417 人
  • 访问总量: 8708442 次
  • 最近更新: 2019年7月17日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线