组件的$attrs属性和$listeners属性

1.$attrs属性

它是组件自身的一个属性，可以获取到传递给组件的所有没有用props声明接收的prop属性。

当父组件传递给子组件的props数据较多时，子组件可以使用v-bind="$attrs"将所有props属性接收使用。

如：父组件

<new-button type="success" icon="el-icon-plus" size="mini" />

子组件接收使用

<el-button v-bind="$attrs"></el-button>

2.$listeners属性

它是组件自身的一个属性，可以获取到传递给组件的不含.native修饰的全部自定义事件，然后也可以用$emit('事件名'，params)去触发事件。

如：父组件

<new-button @click="handler1" @hover="handler2" />

<script>
......
methods:{
      handler1(){
        console.log('click,handler1');
      },
      handler2(){
        console.log('hover,handler2');
      }
  }
</script>

子组件：用v-on="$listeners"进行绑定时，点击el-button可以触发自定义事件click，不能触发hover，应该就是将所有事件重新绑定到了el-button身上，@click变成了点击事件。

<el-button v-on="$listeners"></el-button>
<script>
mounted(){
    console.log(this.$listeners); //可以获取到click和hover这两个自定义事件
    this.$emit('hover') 
  }
</script>