$attrs和$listeners的常见用法

2.4.0 新增

1. vm.$attrs

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

如果父传子有很多值,那么在子组件需要在props中定义多个值来接受父组件中传递过来的值;而$attrs则可以直接获取未在 props 定义的值.

• 子组件中未定义props,会打印父组件中传过来的值.

  // 父组件
  <home title="标题" :num="80" :status="false" :data="{type: 1}"/>
  
  // 子组件
  mounted() {
  	console.log(this.$attrs) // { title: "标题", num: 80, status: false, data: {type: 1} }
  },
  

• 相对应的如果子组件定义了 props,打印的值就是剔除定义的属性

  props: { 
  	title: {
  		type: String,
  		default: ''  
  	}
  },
  
  mounted() {
  	console.log(this.$attrs) // { num: 80, status: false, data: {type: 1} }
  },
  

2. vm.$listeners

官方介绍: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

子组件需要调用父组件的方法可以通过$listeners

// 父组件
<home @change="change"/>

// 子组件
mounted() {
	console.log(this.$listeners) // 即可拿到 change 事件
}

注: 如果是孙组件要访问父组件的属性和调用方法,可以按照上述介绍的方法一级一级传下去就可以

3. inheritAttrs

官方介绍: 默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。
注意：这个选项不影响 class 和 style 绑定

• inheritAttrs默认值为true，true的意思是将父组件中除了props外的属性添加到子组件的根节点上;

  props: { 
  	title: {
    			type: String,
     		default: ''  
     	}
  },
  
  // 此时inheritAttrs默认为true
  
  mounted() {
  	console.log(this.$attrs) // { num: 80, status: false, data: {type: 1} }
  },
  

  此时组件内未被注册的属性将作为普通html元素属性被渲染
  

• 在组件定义中添加inheritAttrs：false，属性就不会显示在根节点上了

  props: { 
  	title: {
    			type: String,
     		default: ''  
     	}
  },
  
  inheritAttrs: false,
  
  mounted() {
  	console.log(this.$attrs) // { num: 80, status: false, data: {type: 1} }
  },
  

  组件将不会把未被注册的props呈现为普通的HTML属性
  

注: 在子组件里我们依然可以通过其$attrs可以获取到没有使用的注册属性