$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>
 

随机推荐

  1. 【cf995】F. Cowmpany Cowmpensation(拉格朗日插值)

    传送门 题意: 给出一颗树,每个结点有取值范围\([1,D]\). 现在有限制条件:对于一个子树,根节点的取值要大于等于子数内各结点的取值. 问有多少种取值方案. 思路: 手画一下发现,对于一颗大小为 ...

  2. 2. Vue - 初始

    一.vue简单介绍 1. vue定义 ​ vue是一套用于构建用户界面的渐进式框架.vue被设计为可自底向上逐层应用,vue的核心只关注视图层:vue的特点是数据驱动视图,可直接修改数据,不用再手动编 ...

  3. try ... except...,好处是执行失败后,仍然可以继续运行

    import requeststry: a=requests.get("https:///www.baidu.com") print('连接成功')except: print('连 ...

  4. day58_9_24多对多建表手动,form组件(判断类型),cookies和session

    一.多对多建表关系之手动添加. 1.全自动 像之前讲过的一样,我们可以通过manytomanyField的字段来建立多对多关系: class Book(models.Model): title = m ...

  5. svg 画地图

    下载一个svgDeveloper软件,破解版下载     1.首先找一张地图作为绘制模板;(当然你也可以自己画,不准确怪我咯!)       2.新建svg文件:File --> New --& ...

  6. Ubuntu无法正常输入英文单引号符号 + 误删除package导致系统设置异常(解决方案)

    1 先说解决单引号的问题 写代码,遇到了输入英文单引号无法正常输入,需要按两次,而且不是竖向,而是斜的. 然后在寻找解决方案的过程中又遇到了把中文输入法搞得不能使用的问题.破费周折!!! 对Ubunt ...

  7. 【08月28日】A股滚动市盈率PE历史新低排名

    2010年01月01日 到 2019年08月28日 之间,滚动市盈率历史新低排名. 上市三年以上的公司,2019年08月28日市盈率在300以下的公司. 1 - 文山电力(SH600995) - 历史 ...

  8. Azure Automation (7) 执行Azure SQL Job

    <Windows Azure Platform 系列文章目录> 之前Automation介绍的内容,是在ASM模式下自动化开关机. 本章将介绍如何在Automation中,设置开关机脚本, ...

  9. Python连载23-file_analysis

    一.文件 1.定义:长久保存信息的一种信息集合 2.常用操作:(1)打开关闭(2)读写内容(3)查找 3.open函数 (1)意义:打开文件,带有很多参数 (2)第一个参数:必须有,文件的路径和名称 ...

  10. Spring Security 实战干货:使用 JWT 认证访问接口

    (转载)原文链接:https://my.oschina.net/10000000000/blog/3127268 1. 前言 欢迎阅读Spring Security 实战干货系列.之前我讲解了如何编写 ...