vue的$attrs和$listeners

1.$attrs

场景:如果父传子有很多值,那么在子组件需要定义多个 props
解决:$attrs获取子传父中未在 props 定义的值.
相对应的如果子组件定义了 props,打印的值就是剔除定义的属性

// 父组件
<home title="这是标题" width="80" height="80" imgUrl="imgUrl"/>

// 子组件
mounted() {
  console.log(this.$attrs) //{title: "这是标题", width: "80", height: "80", imgUrl: "imgUrl"}
},

this.$attrs是一个对象，属性是父组件中的自定义属性，并且是剔除了了props中的

2.$listeners

子组件获取父组件的方法

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

// 子组件
mounted() {
  console.log(this.$listeners) 
}

this.$listeners是一个对象，其中属性名为change（与父组件的自定义事件同名）的就是父组件的change方法