Vue组件通信-$attrs与$listeners

一、$attrs与$listeners是什么

$attrs与$listeners都是是属于组件实例自身的一个属性

$attrs：包含了父作用域中不包含在props中的属性，这些属性可以在组件内部使用，也可以通过v-bind="$attrs"传递给子组件使用。

$listeners：包含了父作用域中的(不含.sync修饰器的)v-on事件监听器，这些监听器可以在组件内部使用，也可以通过v-on="$listeners"传递给子组件使用。

二、$attrs与$listeners怎么用

举例：自定义带hover提示的按钮+点击按钮出现弹窗

父组件内:

接收子组件，向子组件传递数据(参数)👇定义自定义事件👇

<template>
  <div>
    <h2>hover属性的按钮</h2>
    <!-- 在使用封装的按钮时，向子组件传递相应的参数 -->
    <!-- @click代表的是自定义事件 -->
    <hintButton icon="el-icon-plus" size="mini" type="success" title="翻滚的露西" @click="handler"></hintButton>
  </div>
</template>
 
<script>
//引入子组件
import hintButton from '@/components/hintButton.vue'
export default {
  name: 'app',
  //注册
  components: {
    hintButton
  },
  methods: {
    handler() {
      alert('露西666')
    }
  }
}
</script>
 
<style></style>

子组件内:

通过v-bind="$attrs"接收父组件传递的数据👇

通过v-on="$listeners"可以获取到父组件给子组件传递自定义事件👇

<template>
  <div>
    <!-- 可以使用a标签实现按钮带有提示功能 -->
    <a :title="title">
      <el-button v-bind="$attrs" v-on="$listeners"></el-button>
    </a>
  </div>
</template>
 
<script>
export default {
  name: 'hintButton',
  props: ['title'],
  mounted() {
    console.log('this.$attrs', this.$attrs)
    console.log('this.$listeners', this.$listeners)
  }
}
</script>
 
<style></style>

三、控制台打印的结果

打印this.$attrs可以看到向子组件传递相应的参数(如果子组件props没有接收title，那title也会在以下的参数中)

打印this.$listeners可以看到自定义事件

四、效果呈现

第一种：点击按钮，出现弹框

第二种：鼠标放在按钮上，出现hover提示信息