Vue中$attrs和$listener的用法

1.$attrs:用于继承获取父组件的所有属性（除了props中传递的属性，以及class和style属性）

2.$listener:用于继承获取父组件的所有事件，包含了作用在该组件上的所有事件。

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

---

说明：

1.在template中input绑定了$attrs，实际上是绑定了原始input标签中的属性，除了class和style以及props外.

2.在template中v-on="inputListeners"，实际上绑定了组件中自定义的事件监听器，通过computed计算属性定义其函数，其中有原始的监听器，也有覆盖了原始监听器的方法input。

3.inheritAttrs: false表示它的子组件不能够继承于它，也就是它的子组件获取不到它的属性，默认为true

---

总结：

1.$attrs,$listeners,$props，这三个我们都可以通过vue实例来访问到，同时$attrs+$props等价于该组件定义的所有的属性，他们三个的作用都是继承父组件的相关的要素到当前使用的组件中来。

2.上述的代码可以当作一个普通的input使用，这也就是为什么vue被称为组件式开发框架，它不同于传统框架，例如layui，easyui，jquery，amazeui等，传统的框架是基于已有的html标签，在其中添加额外的自定义属性，而vue可以重写覆盖已有的标签，进而形成自己的一套组件体系，就像element-ui。所以vue的组件式开发更加灵活和高效，可用！

---