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

时间：2019-10-06 20:49:17 阅读：126 评论：0 收藏：0 [点我收藏+]

标签：false font code 输出 port 组件技术设置节点

$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

<div>

<br>

go222

<p>childCom2: {{ $attrs }}</p>

<br>

</div>

</template>

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

<div>

<br>

go333

<p>childCom3: {{ $attrs }}</p>

<br>

</div>

</template>

export default {

props: {

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

created() {

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

}

</script>

技术图片

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

标签：false font code 输出 port 组件技术设置节点

原文地址：https://www.cnblogs.com/IwishIcould/p/11628105.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行