Vue-- $attrs与$listeners的详解

vm.$attrs

• 2.4.0新增
• 类型 { [key: string]: string }
• 只读
• 详细
  包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
  简单点讲就是包含了所有父组件在子组件上设置的属性（除了prop传递的属性、class 和 style ）。

    

      
    
      Vue.component("base-input", {
        inheritAttrs: true, //此处设置禁用继承特性
        props: ["label"],
        template: `
        
          {{label}}-
          {{$attrs.placeholder}}-
          
        
        `,
        mounted: function() {
          console.log(this.$attrs);
        }
      });
      const app = new Vue({
        el: "#app"
      });

在生命周期方法mounted中打印$attrs,显示除了calss和props定义的属性之外的其他属性。
通过 v-bind="$attrs" 传入子组件内部的input标签

vm.$listeners

• 2.4.0新增
• 类型 { [key: string]: Function | Array }
• 只读
• 详细
  包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
  简单点讲它是一个对象，里面包含了作用在这个组件上所有的监听器（监听事件），可以通过 v-on="$listeners" 将事件监听指向这个组件内的子元素（包括内部的子组件）。
  为了查看方便，我们设置inheritAttrs: true,后面补充一下inheritAttrs。

上例中，父组件在child1组件中设置两个监听事件test1和test2,分别在child1组件和child1组件内部的child2组件中执行。还设置了三个属性p-child1、p-child2、p-child-attrs。其中p-child1、p-child2被对应的组件的prop识别。所以：
p-child1组件中$attrs为{ "p-child2": "pChild2的值", "p-child-attrs": 1231 };
p-child2组件中$attrs为{ "p-child-attrs": 1231 }。
效果如下图：

我们再点击child2组件中的按钮，触发事件，控制台可以打印出：

补充

inheritAttrs

• 2.4.0新增
• 类型 boolean
• 默认值：true
• 详细
  默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。
  注意：这个选项不影响 class 和 style 绑定。
  上例中同样的代码，设置了inheritAttrs: true，元素结构显示如下图：
  
  
  没有被 props绑定的属性placeholder和test-attrs显示到了子组件根节点上了。
  下面我们把上例中设置inheritAttrs: false,元素结构显示如下图：
  
  
  没有被 props绑定的属性就没有作为普通的 HTML 特性应用在子组件的根元素上。