vue注意点$attrs、$slots

最新推荐文章于 2024-07-18 17:00:19 发布
最新推荐文章于 2024-07-18 17:00:19 发布
阅读量1.5k 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tanghaha01/article/details/123354102
版权
本文深入探讨Vue3中$attrs和$slots的用法。$attrs帮助我们在父组件向子组件传递属性时，捕获未被子组件接收的数据，甚至可以进一步传递给孙组件。同时，$slots提供了一种直接访问插槽中虚拟DOM数据的方法。了解这些特性，能提升组件间的通信效率和灵活性。
摘要由CSDN通过智能技术生成

1. $attrs号称捡漏王
当父组件给子组件传值，子组件并没有接收数据时，此时数据在$attrs中可以拿到，并且如果子组件不需要使用数组，而孙组件需要，则可以直接v-bind="$attrs" 传给孙。

2. $slots插槽数据
可以直接获取到插槽中的虚拟dom数据

vue3中是setup的context参数的值
在这里插入图片描述

iceyTangAi
关注
专栏目录
Vue3官网-可复用&组合式API（十四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件
qq_43456781的博客
09-25 966
Vue3官网-可复用&组合式API（四）实例 property（$slots，$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件（编写，创建插件） 文章目录Vue3官网-可复用&组合式API（四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，`h()` 参数，使用JavaScript代替模板功能)，插件（编写，创建插件）1. 实例 property$data$props$e
vue3中的this.$slot的变化
jibuyueqian的博客
08-19 1185
vue3中的$slot
vue注意点：$attrs、$slots！插槽
ShenWangNian的博客
07-19 1568
inheritAttrs的值为boolean,默认为true，由于v-band='$attrs'传递过来的值会作为dom元素上的属性存在，设置为false可以阻止这个行为，这些属性仍然可以通过$attrs来访问，(vue2中class和style不会受到影响，但是vue3中class和style会受影响)当父组件给子组件传值，子组件并没有接收数据时，此时数据在$attrs中可以拿到，并且如果子组件不需要使用数据，而孙组件需要，则可以直接v-bind="$attrs"传给孙。
vue slot：为什么 $slots 无值而 $scopedSlots 有值？
最新发布
qq_35436516的博客
07-18 499
在 Vue.js 中，$slots 和 $scopedSlots 是组件实例上用于访问插槽内容的两个属性，但它们各自有不同的用途和表现方式，特别是在处理作用域插槽（scoped slots）时。
vue $slots使用
weixin_30699741的博客
03-26 2661
vue $slots使用 <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//unpkg.com/element-ui/lib/index.js"></script> <div id="div1"&gt...
vue.$slots--插槽使用
huangzhuang1028的博客
05-08 902
插槽：组件中的组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <blog-post> <template
【Vue】组件二次封装小技巧 — 利用$slots接收插槽
y_coder的博客
11-08 1529
通过使用v-for和$slots来动态渲染插槽名，你可以实现更灵活的组件，让父组件能够以动态方式定义插槽内容。这使得组件更具通用性，适应各种不同的用例和需求。
细谈 vue - slot 篇
weixin_33787529的博客
05-05 725
本篇文章是细谈 vue 系列第二篇了，上篇我们已经细谈了 vue 的核心之一 vdom，传送门 今天我们将分析我们经常使用的 vue 功能 slot 是如何设计和实现的，本文将围绕 普通插槽 和 作用域插槽 以及 vue 2.6.x 版本的 v-slot 展开对该话题的讨论。当然还不懂用法的同学建议官网先看看相关 API 先。接下来，我们直接进入正文吧 一、普通插槽 首先我们看一个我们对于 s...
vue中$table 里面的$attrs
06-13
在 Vue 中，当你使用某些组件时，组件可能会使用 `$attrs` 属性来传递一些额外的属性到组件内部。 在 `$attrs` 中，存储了组件外部传入的、但是组件内部没有声明的所有属性。这些属性可以通过 `$attrs` 访问并使用...
深入浅析Vue中的slots/scoped slots
08-27
Vue 中的 Slots/Scoped Slots 详解 Vue 中的 Slots/Scoped Slots 是一种强大的功能，可以实现父组件向子组件传递内容的需求。下面，我们将深入浅析 Vue 中的 Slots/Scoped Slots，了解其工作原理和实例代码。 什么...
【vue3】defineSlots, useSlots, $slots 记录/讲解
从今年开始写写博客~~
08-02 1万+
【vue3】defineSlots, useSlots, $slots 记录/讲解。插槽 ＜slot＞ / v-slot 的使用与讲解。仅支持 Vue 3.3+ 的版本。就因为新增了这API，让我写了这文章。 其他功能描述同 $slots 一致。 这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。 defineSlots() 只接受TS类型参数，没有运行时参数。也就是说你项目不是TS的话，就不用看这个了。 它还返回slots对象，该对象等同于在 setup 上下文中暴露或由us
vue3之slots和attrs函数使用(setup函数的使用)
weixin_47039303的博客
12-02 4122
slots就是拿到插槽的数据(但是这个用法我不是特别清楚)(直接把插槽放在组件标签里面,一般插槽是放在组件声明的时候的,不清楚作用,等待解决) attrs:就可以拿到这个组件传进来的属性的数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"&g
vue内slot插槽学习以及$slots集使用
热门推荐
weixin_41993525的博客
12-08 1万+
vue内自定义组件时不可避免碰见slot，会使用slot 知道slot是组件插槽，可以用来根据名称在组件的指定dom节点插入指定内容，使用很方便。 默认插槽 <test-btn> <span>it</span> </test-btn> test-btn组件内： <template> <div> <span>learn</span> <slot><
vue slot 仔细研究一下
超级罗伯特的博客
03-07 561
以上内容仔细研究一下，slot插槽是非常重要的核心内容，多用多练即可。
Vue组件传值 之 $attrs 和 $listeners
归小超博客
04-26 922
首先，我们先来看一下官方对$attrs 和 $listeners的解释： $attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 $list...
细谈Vue中插槽Slots
会思想的苇草i的博客
08-22 876
元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。Vue 组件的插槽机制是受原生 Web Component 元素的启发而诞生，同时还做了一些功能拓展。vue的slot主要分三种，默认插槽，具名插槽，作用域插槽；使用插槽是在存在父子关系的组件中使用，我们可以在子组件中决定插槽的位置，同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息
vue slot 插槽详解
A-Select °
11-13 1089
插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签 插槽有三种：默认插槽、具名插槽、作用域插槽，由于vue2.6.0后对插槽进行修改，但是兼容2.6.0前的版本，博文中只说明2.6.0后的插槽，vue3.0后面会去除2.60前的版本兼容 　　一、默认插槽 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <
vue slot插槽详解
帥潔的博客
03-04 703
插槽就是子组件中提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。 插槽的目的在于使组件更具有扩展性，如何封装一个好的组件？就是将共性抽取到组件中，将不同暴露为插槽。一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。 一、插槽内容 二、具名插槽 三、作用域插槽 四、废弃的具名插槽 ...
Vue 插槽 (Slots) 源码解析与用法
官方推荐
01-23 1400
Vue 插槽 (Slots) 源码解析与用法；插槽；slot
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

iceyTangAi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值