vue inheritAttrs、$attrs和$listeners使用
2024-08-28 11:40:38
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传递。
最终祖父组件收到孙组件的事件了。
最新文章
- windows management instrumentation服务未启动-解决脚本
- 在Mac下配置php开发环境:Apache+php+MySql
- linux shell 报错 Syntax error: Bad for loop variable
- JSONP跨域的原理解析
- afterTextChanged() callback being called without the text being actually changed
- Linux网络编程3&mdash;&mdash;socket
- Java正确转换html编码
- C++ CreateDirectory
- lintcode:Palindrome Partitioning 分割回文串
- Linux下redis的安装及用法
- jQuery Easy UI LinkButton(button)包
- go web 第三天 学习笔记 --mysql
- Reward List 赏金列表
- CSS实现经典的三栏布局
- zabbix自定义监控
- 20190311 Windows安装ZooKeeper
- RabbitMQ安装教程
- 【嵌入式】arm-linux-gcc/ld/objcopy/objdump参数概述
- [转] 如何让代码可测试化(C#)
- 修改ubuntu密码
热门文章
- Backup your Android without root or custom recovery -- adb backup
- [INSTALL_FAILED_OLDER_SDK]错误
- apt-get无法下载,一些网址Not Found 404
- Spring3.2.3+Quartz2.2.1 整合配置
- 成为Java高手的25个学习目标
- mysql的TABLE_SCHEMA的sql和information_schema表, MySQL管理一些基础SQL语句, Changes in MySQL 5.7.2
- [转]linux下完全备份数据库mysql
- Informatica 常用组件Lookup缓存之三 重建查找高速缓存
- Informatica 常用组件Lookup之一 概述
- 可进可退,jQuery图片、视频、flash播放插件prettyPhoto使用记录