唯品秀前端博客
当前位置: 前端开发 > Vue2.js专栏 >

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

作者：管理员 2019-06-28 9:46:55 分类：Vue2.js专栏 阅读（6660） 2

$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是不会被继承的，用脑子想想就知道，这要是被继承，那还得了，页面不都得乱套了。

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(3) 打赏
标签：

上一篇：

下一篇：

相关推荐

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

表情

最新评论

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

    最近有点勤快哦，高产似母猪！

    123.151.144.161 2019-06-28 11:55 回复
    1. 管理员
      Windows 10 Chrome 57.0.2987.98

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

      123.151.144.159 2019-06-28 11:58 回复
    2. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏