inheritAttrs、$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传递。

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

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

  1. vue中$attrs和$listeners以及inheritAttrs的用法

    官方文档说明: 一.解释:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外). 意思就是父组件往子组件传没有在props里声明过的值时,子组件可以通 ...

  2. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  3. Vue - 组件通信之$attrs、$listeners

    前言 vue通信手段有很多种,props/emit.vuex.event bus.provide/inject 等.还有一种通信方式,那就是 $attrs 和 $listeners,之前早就听说这两个 ...

  4. vue中的$props、$attrs和$listeners研究 [包装iview组件]

    $props:当前组件接收到的 props 对象.Vue 实例代理了对其 props 对象属性的访问. $attrs:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 ...

  5. vue组件传值之$attrs、$listeners

    当有父组件A,子组件B,孙子组件C的时候 A-B B-C 的传值想必大家应该都非常熟悉了,通过props和$emit和$on来进行传值 那么A-C之间的传值要怎么做呢? 1.event.bus总线传值 ...

  6. Vue组件传值(三)之 深层嵌套组件传值 - $attrs 和 $listeners

    $attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外).当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class和 ...

  7. vue2 inheritAttrs、attrs和attrs和listeners使用

    inheritAttrs.attrs和attrs和listeners使用场景: 组件传值,尤其是祖孙组件有跨度的传值. (1)inheritAttrs 属性说明:https://cn.vuejs.or ...

  8. 关于 vue2.x 的 $attrs 和 $listeners

    $attrs $attrs 用于多层次组件传递参数(组件标签的attribute,class和style除外),爷爷辈组件向孙子辈组件传递参数(注:参数不能被父辈prop识别,一旦被父辈prop识别且 ...

  9. vue踩坑记录:[Vue warn]: $attrs is readonly.

    今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...

随机推荐

  1. 华为S5300系列交换机V100R005SPH008热补丁

    S23_33_53-V100R005SPH008.pat 附件: 链接:https://pan.baidu.com/s/1XfIQ55g5pWI9aqmM7LHUew  密码:f2mu

  2. [Linux] VIM Practical Note

    Practical Vim 文件 1.1. 管理多个文件 1.1.1. 缓冲区 • :ls • 查看缓冲区列表 • :bprev • 前一项 • :bnext • 后一项 • :bfirst • 第一 ...

  3. Win7 开启显示快速启动工具栏,发送到快速启动右键菜单

    开启Win7快速启动栏 许多网友一定记得在 Windows 7 之前的 Windows 系统都有个快速启动(quick launch)区域. 比如 IE 浏览器.Windows Media Playe ...

  4. 解决idea 控制台中文乱码

    打开IntelliJ IDEA 14.0安装路径,小编的安装路径为:D:\Program Files\JetBrains\IntelliJ IDEA 14.0\bin 找到idea.exe.vmopt ...

  5. WIN7 下面 装XP

    WIN7 下面1.解压 GHOST.ISO2.点里面的 安装系统3.进入 DOS GHOST 界面,进行GHOST系统到自已指定的XP分区4.开始安装XP5.安装完毕后,打开 dbr-1.2.0.0. ...

  6. MVC扩展DataAnnotationsModelMetadataProvider给model属性对应的页面元素添加任意属性和值

    比如,有这样一个类: public class User    {        public string Name { get; set; }    } 当在强类型视图页,显示属性Name对应的i ...

  7. 使用msm配置分布式tomat,实现session共享

    一,环境说明 操作系统是Windows7家庭版(有点不专业哦,呵呵!),JDK是1.6的版本, Tomcat是apache-tomcat-6.0.35-windows-x86,下载链接:http:// ...

  8. struts2点滴记录

    1.s:textfield 赋值方法 <s:textfield name="Tname" value="%{#session.Teacher.name}" ...

  9. JDK1.6官方下载_JDK6官方下载

    JDK1.6官方下载_JDK6官方下载地址: http://www.java.net/download/jdk6/6u10/promoted/b32/binaries/jdk-6u10-rc2-bin ...

  10. Java Net版短网址(ShortUrl)的算法及实现 待续

    算法 1)将长网址md5生成32位签名串,分为4段, 每段8个字节; 2)对这四段循环处理, 取8个字节, 将他看成16进制串与0x3fffffff(30位1)与操作, 即超过30位的忽略处理; 3) ...