一、什么是透传

透传是一个通讯层面的概念，指的是在通讯中不管传输的业务内容如何，只负责将传输的内容由源地址传输到目的地址，而不对业务数据内容做任何改变。
在vue2里，我们的组件存在深层嵌套的场景 比如：

aa > bb > cc

我们会在aa组件里带上业务中提供的数据，一层层的传递进去，在传递的过程中一般有两种方案：

1. 通过props具名接收，再继续向内层传递
2. 通过$listeners和$attrs变量配合v-on和v-bind进行批量透传

二、属性透传：v-bind="$attrs"

//aa
<template>
    <bb :x="x" :y="y" @click="click()" />
</template>
<script>
export default {
methods: {
    click() { 
        console.log("aa");
    },
  },
}
</script>

//bb 将父组件传来的参数全部传给自己的子组件，相当于一个桥梁
<template>
    <cc v-bind="$attrs" v-on="$listeners" />
</template>
<script>
export default {
methods: {
    cClick() { 
        this.$emit("click"); 
    },
  },
}
</script>


//cc
<template>
    <p @click="click()">{{x}} </p>
    <p>{{y}} </p>
</template>
<script>
export default {
  props: {
    x: {
      type: String,
      default: "",
    },
    y: {
      type: String,
      default: "",
    },
  },
  
  methods: {
    click() {
      this.$emit("cClick");
    },
  },
};
</script>