vue $attrs 和$listener

$attrs

$attrs--继承所有的父组件属性（除了prop传递的属性、class 和 style ）
inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承
子组件

<template>
  <div>
    <label>输入框：</label><input v-bind="$attrs" @input="$emit('input',$event.target.value)"/>
    <div>{{ $attrs.title }}</div>
  </div>
</template>

<script>
  export default {
    name: "product",
    inheritAttrs: true,//默认值true,继承所有的父组件属性（除props的特定绑定）
    mounted() {
      console.log(this.$attrs)
    }
  }
</script>

<style scoped>

</style>

this.$attrs打印如下：

image.png

父组件

<my-input placeholder="请输入你的姓名" type="text" title="姓名"></my-input>

效果

image.png

不用props接收，就可以获取到父组件传过来的值

$listeners

$listeners，它是一个对象，里面包含了作用在这个组件上的所有监听器
子组件

<label>输入框：</label><input v-bind="$attrs" v-on="$listeners"/>
mounted() {
      console.log(this.$listeners)
    }

this.$listeners打印如下：

image.png

父组件

<my-input placeholder="请输入你的姓名" type="text" title="姓名" content="我是父组件传过来的内容" @focus="focus"></my-input>