【vue】多层级组件传值（通讯）方式

$listeners和$attrs

• $listeners是将三级组件的事件和参数传递给一二级组件
• $attrs可以将一级组件的数据直接在三级组件中使用，比较优雅的一个传值方式，不用像props那么繁琐

在一级组件中引入二级组件，并将data和message传递给二级组件；getLevel3Messgae是三级组件中的事件

<template>
  <!-- 一级组件 -->
  <div class="level-1">
    <!-- 二级组件 -->
    <Level2 :data="data" :message="message" @getLevel3Messgae="getMessage" />
  </div>
</template>

<script>
import Level2 from "./Level2";
export default {
  name: "Home",
  components: {
    Level2,
  },
  data() {
    return {
      data: [
        {
          name: "zs",
          age: 18,
        },
      ],

      message: "message",
    };
  },

  methods: {
    getMessage(data) {
      console.log("level1: ", data);
    },
  },
};
</script>

二级组件中可以直接通过this.$attrs的方式获取到一级组件中的值，并通过v-bind将attrs传递给三级组件；
并且可以通过v-on的方式将三级组件中的事件传递给一级组件

<template>
  <!-- 二级组件 -->
  <div class="level-2">
    <!-- 三级组件 -->
    <Level3 v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import Level3 from "./Level3.vue";
export default {
  components: { Level3 },

  created() {
    console.log("level2 attrs: ", this.$attrs);
    console.log("level2 listeners: ", this.$listeners);
  },
};
</script>

三级组件中就可以使用到一级组件传递下来的值

<template>
  <div class="level-3">level3</div>
</template>

<script>
export default {
  created() {
    console.log("level3 attrs: ", this.$attrs);
  },

  mounted() {
    this.$emit("getLevel3Messgae", "level3 message");
  },
};
</script>