inheritAttrs、attrs和attrs和listeners使用场景:

组件传值,尤其是祖孙组件有跨度的传值。

(1)inheritAttrs

属性说明:https://cn.vuejs.org/v2/api/#inheritAttrs

说明比较晦涩。

组件传值一般是通过props传值的。inheritAttrs默认值为true,true的意思是将父组件中除了props外的属性添加到子组件的根节点上(说明,即使设置为true,子组件仍然可以通过$attr获取到props意外的属性)。示例代码:

grandpaDom.vue:

<template>
<div>
<father-dom
:foo="foo"
:coo="foo"

v-on:upRocket="reciveRocket"
>
</father-dom>
</div>
</template>
<script>
import fatherDom from "./fatherDom.vue";
export default {
data() {
return {
foo:"Hello, world",
coo:"Hello,rui"
}
},
components:{fatherDom},
methods:{
reciveRocket(){
window.console.log('火箭发射成功!')
}
}
}
</script>
 

fatherDom.vue:

<template>
<div>
<p>------------fatherDom-------------</p>
<p>attrs:{{$attrs}}</p>
<p>foo:{{foo}}</p>
<p>------------fatherDom-------------</p>
<child-dom v-bind="$attrs" v-on="$listeners"></child-dom>
</div>
</template>
<script>
import childDom from "./childDom.vue";
export default {
name:'father-dom',
props:["foo"],
components:{childDom},
}
</script>
 

说明:grandpaDom.vue将foo和coo属性都放在fatherDom.vue上,但是fatherDom.vue的props值接收了foo,因此grandpaDom的coo属性显示在了fatherDom的根节点上。即:

接着将inheritAttrs:false后(请将fatherDom.vue添加inheritAttrs:false),coo属性就不会显示在fatherDom根节点上了。但是怎么获取到coo呢

这时就通过$attrs获取到到coo。

接着看孙组件childDom.vue:

 
<template>
<div>
<p>------------childDom-------------</p>
<p>coo:{{coo}}</p>
<button @click="startUpRocket">我要发射火箭</button>
<p>------------childDom-------------</p>
</div>
</template>
<script>
export default {
name: "childDom",
props: ["coo"],
methods: {
startUpRocket() {
this.$emit("upRocket");
window.console.log('我要发射火箭了。')
}
}
};
</script>
 

孙组件childDom.vue就可以通过props接收到coo属性了。

好,以上是总祖父--父亲--儿子向下传递值

那怎么儿子-父亲--祖父传递数据呢呢?

父亲组件使用$listeners传递。

最终祖父组件收到孙组件的事件了。

转自:https://www.cnblogs.com/mengfangui/category/968713.html

vue2 inheritAttrs、attrs和attrs和listeners使用的更多相关文章

  1. 16. Vue2.4+新增属性$attrs

    vm.$attrs简介 首先我们来看下vue官方对vm.$attrs的介绍: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明 ...

  2. 关于vue3的inheritAttrs属性和$attrs的部分用法

    当我们在父组件中想要为子组件的某一个标签添加一些样式(注意,这里的是指attributes,css样式只是其中一种属性而已) <show-message id="lkx" c ...

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

    $attrs/inheritAttrs可以实现组件的跨级传递  // 问题1  为什么this.$attrs可以得到主  传递过来的值         //$attrs 说明          //  ...

  4. vue组件通信(props,$emit,$attrs,$listeners)

    朝颜陌   vue基础----组件通信(props,$emit,$attrs,$listeners) 一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. ...

  5. vue基础----组件通信(props,$emit,$attrs,$listeners)

    一.父传子,子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据. 2>在子组件中通过props声明希望用到的数据 <body> <div id= ...

  6. Vue 中 $attrs 的使用

    名词解释: $attrs--继承所有的父组件属性(除了prop传递的属性.class 和 style ) inheritAttrs:默认值true,继承所有的父组件属性(除props的特定绑定)作为普 ...

  7. attr/attrs模块

    attr简介 开源库,提供了为函数或类提供更直接的创建属性的方法. Github or PyPi 用法 from attr import attrs, attrib @attrs class Foo: ...

  8. Vue2.0学习--Vue数据通信详解

    一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...

  9. vue2与vue3的差异(总结)?

    vue作者尤雨溪在开发 vue3.0 的时候开发的一个基于浏览器原生 ES imports 的开发服务器(开发构建工具).那么我们先来了解一下vite Vite Vite,一个基于浏览器原生 ES i ...

随机推荐

  1. 系统学习PHP的一些思路

    作为一名新进的PHPer,迫切的想提高自己的编码水平,目前市面上几乎没有高手来给新手指点出一条相对靠谱的途径. 首先,面对PHP众多杂乱无章的各种函数,到底该怎么去理清其各者之间的关系,经过一段时间的 ...

  2. IIS部署Angular2

    因為Angular無刷新的特性,所以瀏覽器地址欄上的網址其實不會真實映射到磁盤的特定位置,所以我們需要安裝.Rewrite Module, 如下: Web.config 如下: <?xml ve ...

  3. 5个最好的TensorFlow网络课程

    1. Introduction to TensorFlow for Artificial Intelligence, Machine Learning and Deep Learning This c ...

  4. CentOS 7 zabbix实现微信报警

    环境 : LAMP  CentOS7  192.168.94.11 首先搭建LAMP环境 , 安装zabbix [root@zabbix-server ~]# wget http://repo.zab ...

  5. SSH的软链接后门

    之前说过为了防止SSH的后面漏洞 , 升级到高版本的OpenSSH , 那也不能保证万无一失 经典后门  直接对sshd建立软连接 , 之后用任意密码登录即可 看下面操作 创建完软连接后  创建新的会 ...

  6. No module named 'pip._internal'

    报错: Traceback (most recent call last):File "/home/myuser/.local/bin/pip", line 7, in <m ...

  7. get_class __class__ get_called_class 分析记录

    首先看代码: class A { use T { T::say as aTsay; } public function say() { echo 'a__class__:' . __CLASS__ . ...

  8. 基于PLC1850平台的ARP包请求与响应

    一.以太网ARP报文格式 ①.以太网目的地址:占6个字节(接收方的MAC地址,不清楚时发广播地址:FF-FF-FF-FF-FF-FF) ②.以太网源地址:占6个字节(发送方的MAC地址) ③.帧类型: ...

  9. linux用户键拷贝文件

    如果A用户没有权限写B用户下面的文件,可以用这个命令拷贝 scp AAA.tar.gz B用户名@IP:全路径

  10. 硬件笔记之MacMini开启HiDPI

    0x00 概述 先科普一下,有关retina和HiDPI那点事 ,Macmini在2k显示器的显示太小了,看起来费眼,没办法,苹果原生HiDPI是支持4k显示器的,所以以后买显示器,直接买4k的一步到 ...