Vue $attrs使用方式及使用场景

2024-06-05 19:48:06

一、使用场景

假如我们要做一个页面，有父组件，子组件，孙子组件......，

这时候使用props传递，这也就意味着当你想向嵌套层级比较深组件数据传递，只能由父组件传递给子组件，子组件再传递给孙子组件...，这样需要一层一层的往下传，需要不停的写props接收传递，一两个还好，十个八个的就太麻烦了。这时候就可以考虑用$attrs传递了。

二、使用方式

1，父组件页面传递数据

<son title="aaaaaaaaaaa" name="李四"/>

2，子组件作为中间组件继续传递 v-bind="$attrs"

<template><div>儿子组件：{{$attrs.name}}<div><sunzi v-bind="$attrs"/></div></div>
</template><script>
import sunzi from './sunzi.vue';
export default {inheritAttrs: true,components:{sunzi},mounted(){console.log(this.$attrs)  //{title:"aaaaaaaaaaa" name:"李四"}}
}

3，孙子组件使用 inheritAttrs: false。

<template><div>孙:{{name}}{{title}}</div>
</template><script>
export default {inheritAttrs: false,props: ["name","title", //注意props里的参数名称不能改变，必须和父组件传递过来的是一样的],data() {return {};},mounted(){console.log(this.$attrs) //可直接使用数据或者调用根组件的方法}
};

或者


<template><div>或者：{{$attrs.name}},{{$attrs.title}}</div>
</template><script>
export default {inheritAttrs: false,data() {return {};},mounted(){console.log(this.$attrs)//可直接使用数据或者调用根组件的方法}
};
</script>

inheritAttrs: false 的含义是不希望本组件的根元素继承父组件的attribute，同时父组件传过来的属性（没有被子组件的props接收的属性），也不会显示在子组件的dom元素上，但是在组件里可以通过其$attrs可以获取到没有使用的注册属性。

inheritAttrs: false 是不会影响 style 和 class 的绑定

inheritAttrs: true

inheritAttrs: false 不想继承所有父组件的内容,同时也不在组件根元素dom上显示属性

类似效果图

Vue $attrs使用方式及使用场景相关推荐

[vue] 说下$attrs和$listeners的使用场景
[vue] 说下attrs和attrs和attrs和listeners的使用场景 <template><el-button v-on="$listeners" v ...
haproxy各调度算法的实现方式及其应用场景
haproxy各调度算法的实现方式及其应用场景 1. haproxy 静态调度算法 1.1 static-rr 1.2 first 2. haproxy 动态调度算法 2.1 roundrobin(默 ...
Redis简介、与memcached比较、存储方式、应用场景、生产经验教训、安全设置、key的建议、安装和常用数据类型介绍、ServiceStack.Redis使用（1）...
1.NOSQL简介 nosql的产生并不是要彻底的代替关系型数据库,而是作为传统关系型数据库的一个补充. Facebook和360使用Cassandra来存储海量社交数据 Twitter在其url抓取 ...
Kubernetes的三种集群外部访问方式及使用场景说明：NodePort、LoadBalancer和Ingress
Kubernetes的三种外部访问方式:NodePort.LoadBalancer和Ingress 最近有些同学问我 NodePort,LoadBalancer 和 Ingress 之间的区别.它们都 ...
【js】数组置空的其他方式及使用场景
数组在js中属于引用型类型. var arr = [1, 2, 3]; a = []; 通常使用以上方式.如果使用场景必须使用方法置空, 可以采用arr.length = 0; 或者使用a.splic ...
Android性能优化--IO 优化（ IO基本知识：应用程序、文件系统和磁盘，三种IO方式及适用场景，多线程阻塞IO和NIO）
目录 I/O 的基本知识 1. 文件系统 2. 磁盘 Android I/O 1. Android 闪存 2. 两个疑问疑问一:文件为什么会损坏? 疑问二:I/O 有时候为什么会突然很慢? 不同的场 ...
Python实现读、写、改Excel文件的常见方式及其应用场景对比
Excel表格类型当前,Excel文件主要有如下两种格式: .xls格式,主要应用于Excel 2003及以下版本. .xlsx格式,主要应用于Excel 2007及以上版本. 读取Excel xl ...
MATLAB自动驾驶学习（3）——以编程方式创建驾驶场景的变体
前言以编程方式创建使用驾驶方案设计器应用生成的驾驶方案的变体,便于基元场景的快速组合生成,能够在多个条件下快速测试驾驶算法,一般在自动化测试时很有用.主流的自动驾驶仿真软件中都支持在程序中直接改变场 ...
设计模式学习笔记（四）单例模式的实现方式和使用场景
单例模式可以说是Java中最简单的设计模式,也是技术面试中频率极高的面试题.因为它不仅涉及到设计模式,还包括了关于线程安全.内存模型.类加载等机制.所以下面就来分别从单例模式的实现方法和应用场景来介绍 ...

最新文章

热门文章