vue多級嵌套組件傳參

$attrs

$attrs概念： 包含了父做用域中不做爲 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這裏會包含全部父做用域的綁定 (class 和 style 除外)，而且能夠經過 v-bind="$attrs" 傳入內部組件——在建立高級別的組件時很是有用。

參考文檔

$listeners

$listeners概念：包含了父做用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它能夠經過 v-on="$listeners" 傳入內部組件——在建立更高層次的組件時很是有用。
參考文檔 連接描述

inheritAttrs

inheritAttrs概念：默認狀況下父做用域的不被認做 props 的特性綁定 (attribute bindings) 將會「回退」且做爲普通的 HTML 特性應用在子組件的根元素上。當撰寫包裹一個目標元素或另外一個組件的組件時，這可能不會老是符合預期行爲。經過設置 inheritAttrs 到 false，這些默認行爲將會被去掉。而經過 (一樣是 2.4 新增的) 實例屬性 $attrs 能夠讓這些特性生效，且能夠經過 v-bind 顯性的綁定到非根元素上。
注意：這個選項不影響 class 和 style 綁定。
參考文檔

主要解決的問題

vue多級組件的傳參：A-B-C-D 四個組件嵌套，參數須要從A->D 或者A-C，D組件想要改變A組件的內容等。

A組件

<template>
    <div>
       
        <BComponent
        :B="B"
        :C="C"
        :D="D"
        @DClick= "DClick"
        @CClick="CClick"/>
    </div>
</template>

<script>
    import BComponent from "./BComponent.vue"
    export default {
        components:{
            BComponent
        },
        data() {
            return {
                B:"Hello, B",
                C:"Hello,C",
                D:"Hello,D"
            }
        },
        mounted() {},
        methods: {
            CClick(){
                alert("子組件C操做A組件成功")
            },
            DClick(){
                alert("子組件D操做A組件成功")
            }
        },
    }
</script>
<style scoped>

</style>

B組件

<template>
    <div>
        B組件
        <p>B:{{B}}</p>
        <p>attrs:{{$attrs}}</p>

         <CComponent v-bind="$attrs" v-on="$listeners" @DClick="DClick" />
    </div>
</template>

<script>
    import CComponent from "./CComponent.vue"
    export default {
        components: {
            CComponent
        },
        props:["B"],
        inheritAttrs:false,
        data() {
            return {}
        },
        mounted() {
        },
        methods: {
            DClick(){
                alert("D操做B成功")
            }
        },
    }
</script>
<style scoped>

</style>

C組件

<template>
    <div>
        C組件
        <p>C:{{C}}</p>
        <button @click="startUpRocket">我要發射火箭</button>
        <DComponent v-bind="$attrs" v-on="$listeners"  @DClick="DClick" />
    </div>
</template>

<script>
    import DComponent from "./DComponent.vue"
    export default {
        components:{
            DComponent
        },
        data() {
            return {}
        },
        props: ["C"],
        inheritAttrs: false,
        mounted() {},
        methods: {
            startUpRocket(){
                this.$emit("CClick");
            },
            DClick(){
                alert("D操做C成功")
            }
        },
    }
</script>
<style scoped>

</style>

D組件

<template>
    <div>
        D組件
        <p>D:{{D}}</p>
         <button @click="DClick">我要操做父組件</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {}
        },
        props:["D"],
        mounted() {},
        methods: {
            DClick(){
                this.$emit("DClick");
            }
        },
    }
</script>
<style scoped>

</style>