$attrs/inheritAttrs可以实现组件的跨级传递

$attrs/inheritAttrs可以实现组件的跨级传递

 // 问题1  为什么this.$attrs可以得到主  传递过来的值

        //$attrs 说明 

        // $attrs 可以很方便的做到属性透传，使用起来也比较简单，避免了多写 props 的痛苦。

        // 当一个组件没有声明任何prop时候，attrs里面包含着全部的上层组件传递的所有数据(除style和class)

        // 当一个组件声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。

        // inheritAttrs

        // 1.当在子组件中设置inheritAttrs: false的时候，attrs里面的属性不会当做html的data属性渲染在dom节点之上。

        // 2.在子组件中不进行设置inheritAttrs的时候，attrs里面的属性会渲染在html节点之上

        // 3.当设置为inheritAttrs: false的时候，在组件的声明周期created中可以通过 this.$attrs 获取里面的上层组件数据。

        // 当在子组件中设置inheritAttrs: false的时候，attrs里面的属性是没有style和class的

 

 

 // $attrs/$listeners可以跨级传递  兄弟之间就不行

 // 最大的go组件里面引入go1组件

 // go1组件里面有go2组件

 // go2里面有go3组件

 

go.vue

<template>
    <div>
      我是 go
      <go1
        :foo="foo"
        :boo="boo"
        :coo="coo"
        :doo="doo"
      ></go1>
    </div>
</template>

<script>
import go1 from "../go1/go1"
    export default {
        data(){
            return{
                foo: "Javascript",
                boo: "Html",
                coo: "CSS",
                doo: "Vue"
            }
        },

        components:{
            go1
        }
    }
</script>

 

 go1.vue

<template>
    <div> 
        <h2>-----------------</h2>
        <br>
        我是go1111
        <!-- <p>foo: {{ foo }}</p> -->
        <!-- <p>go1得到主组件中的数据$attrs: {{ $attrs }}</p> -->
        <go2 v-bind="$attrs"></go2>
        <br>
        <h2>-----------------</h2>

    </div>
</template>

<script>
import go2 from "../go2/go2"
    export default {
        components:{
            go2
        },

        inheritAttrs: false, // .当设置为inheritAttrs: false的时候，在组件的声明周期中可以通过 this.$attrs 获取里面的上层组件数据。

        props: {
            foo: String // 当声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。 所以下面没有 Javascript

        },

        created() {
            console.log("我在1出输出",this.$attrs); // {boo: "Html", coo: "CSS", doo: "Vue"}
        }

    }
</script>

 

 

 go2.vue

<template>
    <div> 
        <h2>-----------------</h2>
        <br>
        
        go222
        <p>boo: {{ boo }}</p>
        <p>childCom2: {{ $attrs }}</p>
        <go3 v-bind="$attrs"></go3>
        <br>


        <h2>-----------------</h2>








    </div>
</template>







<script>
import go3 from "../go3/go3"
    export default {
         components:{
             go3
         },
         inheritAttrs: false,
         props: {
             boo: String  //当声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。 所以下面没有 html
         },
         created() {
            console.log("我是组件2",this.$attrs); // 我是组件2 {coo: "CSS", doo: "Vue"}
         }







    }
</script>

 

 go3.vue

<template>
    <div> 
        <h2>-------</h2>
        <br>


        go333
           <p>childCom3: {{ $attrs }}</p>
        <h2>-------</h2>
        <br>







    </div>
</template>







<script>
    export default {
        props: {
            coo: String,  //当声明了prop时候，attrs里面包含除去prop里面的数据剩下的数据。 所以下面没有 coo
        },







         created() {
            console.log("我是组件3",this.$attrs); // 我是组件2 { doo: "Vue"}
         }
    }
</script>