vue中的$attrs和$listeners

1.$attrs

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

首先父组件中引入子组件myMap

<my-map :alarmList="alarmList" :getAlarmList="getAlarmList"></my-map>

子组件中打印this.$attrs和this.$listener

props: {
  alarmList: {
    type: Array,
    default: () => [],
  },
}

如果你写了props，此时this.$attrs为{}

2.$listeners

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

首先父组件中引入子组件myMap

<my-map :alarmList="alarmList" @getAlarmList="getAlarmList"></my-map>

子组件中打印this.$attrs和this.$listener

3.inheritAttrs

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。

讲白了就是属性不挂载到dom上

4.运用

父组件：

<template>
  <div>
     <Child :message="message" @getMsg="getMsg()" />
  </div>
</template>
<script>
import Child from "./Child";
export default {
  data() {
    return {
      message: "喂,你在哪里?",
    };
  },
  methods: {
    getMsg() {
      return "我在你下面啊!";
    },
  }
}
</script>

子组件：

<template>
  <div>
    <grand-child v-bind="$attrs" v-on="$listeners"></grand-child>
  </div>
</template>
<script>
import grandChild from "./grandChild";
export default {
  components: {
    grandChild,
  },
};
</script>

孙子组件：

<template>
  <div style="color: red">
    <div>{{ $attrs.message }}</div>
    <div>{{ $listeners.getMsg() }}</div>
  </div>
</template>
<script>
export default {
  mounted() {},
};
</script>