vue中使用v-bind=“$attrs“和v-on=“$listeners“进行多层组件监听

vue组件之间通信，我们可以使用props和vuex两种方式，但是vuex太重，props在多级组件中使用又太麻烦，
vue2.4版本提供了另一种方法，使用v-bind=“$attrs”，将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。

v-bind=“$attrs":将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。并且可以通过v-bind="$attrs” 传入内部组件——在创建高级别的组件时非常有用。
官网介绍: https://cn.vuejs.org/v2/api/#vm-attrs
https://cn.vuejs.org/v2/api/#inheritAttrs

v-on=“将父组件标签上的自定义事件向下传递其子组件可以直接通过emit(eventName)的方式调用（ this.$emit{(}^{\prime }父组件事件{名}^{\prime })）。它可以通过v-on="$listeners” 传入内部组件——在创建更高层次的组件时非常有用。

一、层级关系

<top>
  <center>
    <bottom>
    </bottom>
  </center>
</parent>

如果top组件要和bottom组件进行通信，下面有三种方式可以实现
1.通过props和$emit的方式，需要通过center作为中转，top把值传给center，center再把值传给bottom，或者bottom把值传给center，center在传给top
2.使用vuex，但是这两个组件的状态可能不是全局状态
3.使用中央事件总线bus
使用前两种方式可能都不太理想，这里来讲一下另一种方式

1.top组件

top组件，传递了name，age，gender，sdf四个属性到子组件center，然后接收了两个isClick()和asd()方法

<template>
  <section>
    <centers
      name="name"
      age="18"
      gender="666"
      sdf="asd"
      @isClick="isClick"
      @asd="asd"
    ></centers>
  </section>
</template>
<script>
  import centers from '~/components/center';
  export default {
    components: {
      centers
    },
    methods: {
      asd() {
        console.log(999);
      },
      isClick() {
        console.log(666);
      }
    }
  };
</script>

2.center组件

center组件,只接收了name和age两个属性，其他属性没有接收，使用 v-bind="$attrs"属性，vm.$attrs 是一个属性，其包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。这些未识别的属性可以通过 v-bind="$attrs"传入内部组件。未识别的事件可通过v-on="$listeners"传入（.native绑原生事件是没用的）。

<template>
  <section>
    <div class="mt-10">
      <bottom v-bind="$attrs" v-on="$listeners" />
    </div>
  </section>
</template>

<script>
  import bottom from '~/components/bottom';
  export default {
    components: {
      bottom
    },
    props: {
      name: {
        type: String,
        default: 'default'
      },
      age: {
        type: String,
        default: 'default'
      }
    }
  };
</script>

3.bottom组件

bottom组件，我们只接收了gender属性，但是这个属性是其父组件center使用 v-bind=“$attrs” 从top组件接收到的，center组件本身并没有使用props接收这个属性，但是bottom属性确可是使用

<template>
  <section>
    <div>
      {{ $attrs['gender'] }}  在$attrs里面只会有props没有注册的属性
      <br>
      {{ gender }}
    </div>
  </section>
</template>

<script>
  export default {
    props: {
      gender: {
        type: String,
        default: ''
      }
    },
    mounted() {
      console.log(this.$attrs);
      console.log(this.$listeners);
      this.$listeners.isClick();
      this.$listeners.asd();
    }
  };
</script>

链接: https://www.cnblogs.com/jin-zhe/p/13099416.html.
链接: https://blog.csdn.net/xueyue616/article/details/105379009.