$attrs 和 $linstener

首先，官方解释

2.4.0 新增

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

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

//父组件
<template>
    <div>
        <comp-child :name.sync="name" :sex="sex" @test1="test1" @test2="test2">
        </comp-child>
        {{ name }}
    </div>
</template>
<script>
import compChild from "./child.vue";
export default {
    name: "father",
    data() {
        return {
            name: "zhouxiaoqian",
            sex: "女",
        };
    },
    components: { compChild },
    methods: {
        test1(val) {
            console.log("test1", val)
        },
        test2(val) {
            console.log("test2", val)
        }
    }
};
</script>

在子组件A中，引入子组件B，然后想在子组件B中获取父组件中的数据，需要加$attrs，然后如果想在子组件B中传递方法给父组件，就需要通过$linsteners，这个时候async await也是生效的 

//子组件
<template>
    <div>
        <div>{{name}}</div>
        <div>{{$attrs.sex}}</div>
        <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
        <child-c v-bind="$attrs" v-on="$listeners"></child-c>
    </div>
</template>
<script>
import childC from "./son.vue";
export default {
    name: "child",
    props: ["name"],
    components: { childC },
    mounted() {
       this.test1()
    },
    methods: {
       test1() {
          this.$emit("test1", "111")
          this.$emit("update:name", "zhoudaqian")
       }
    }
};
</script>

//子组件中引入的子组件
<template>
    <div>
        <p>sex:{{$attrs.sex}}</p>
    </div>
</template>

<script>
export default {
    name: "childC",
    mounted() {
       this.test2()
    },
    methods: {
       test2() {
          this.$emit("test2", "222")
          this.$emit("update:name", "hahaha")
       }
    }
};
</script>