vue3中的this.$slot的变化

最新推荐文章于 2024-03-09 23:15:37 发布
最新推荐文章于 2024-03-09 23:15:37 发布
阅读量1k 收藏
点赞数
分类专栏： vue 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jibuyueqian/article/details/126423904
版权

vue3中的this.$slot的数据结构都被破坏了

在vue3中 this.$slot 将所有的插槽作为函数公开

vue2中
this.$slot.default
this.$slot.extra
vue3中
this.$slot.default && this.$slot.default()
this.$slot.extra && this.$slot.extra()
vue3中去掉了$scopeSlot API,所有的插槽都可以通过$slot访问
在vue2的项目中 this.$slot的结构

在这里插入图片描述
在这里插入图片描述

vue3的项目中 this.$slot的结构

在这里插入图片描述

总结

vue2vue3
this.$slots.default[0].data.attrsthis.$slots.default()[0].props
this.$slots.default[0].data.scopedSlotsthis.$slots.default()[0].children
一个程序
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中的this.$options.data()和this.$data用法说明
10-15
主要介绍了Vue中的this.$options.data()和this.$data用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
用event bus解决vue中无法监听到this.$slots.default变化的
hellenYuan的博客
04-26 4039
用event bus解决vue中无法监听到this.$slots.default变化 （包含去除$slots.default中的空白节点this.$slots.default关于event bus代码实现 this.$slots.default vue官网中提到： default property 包括了所有没有被包含在具名插槽中的节点。 也就是说可以通过$slots.default获取到通过...
vue3插槽 Slots
最新发布
qq_35876316的博客
03-09 449
Vue插槽（Slot）的本质是。插槽允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽，可以将其视为组件封装期间为用户预留的内容占位符。插槽的显示与否以及具体如何显示，是由父组件来决定的，而插槽显示的位置则由子组件自身决定。官方给了一个理解插槽的例子：和avaScript 函数作类比，其概念是类似。${：父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。这和 JavaScript 的词法作用域规则是一致的。
vue中 this.$set的用法详解
10-16
主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue Render中slots的使用
wngzhem的博客
01-11 2万+
render 中 slot 的一般默认使用方式如下： this.$slots.default 对用 template的的使用没有name 。 想使用多个slot 的话。需要对slot命名唯一。使用this.$slots.name 在render中添加多个slot。 this is slot Vue.compone
Vue3 从入门到放弃 （第六篇.插槽(Slot)的使用）
Meta.Qing的博客
09-14 1517
上一篇讲到了。今天讲一讲组件插件(Slot),以及实际我们如何使用.
Vue3获取父组件插槽中子组件索引(自定义步骤条)
qq_41105391的博客
09-13 2192
Vue3获取父组件插槽中子组件索引(自定义步骤条) 功能需求 该图是element-plus的一些步骤条样式，我的需求是每一个步骤条可以点击后跳转到对应的页面，且标题需要和数字水平排列，另外还需自定义每个步骤条的样式，此时便需要使用自定义组件。 另外一个小的需要是，我想实现类似select和option的使用方式，如下图 要达到这样的效果，并且要给每一个步骤添加对于的数字，应该如何实现呢？ 代码实现 Step.vue <script lang="ts"> import { defineCom
【vue3】defineSlots, useSlots, $slots 记录/讲解
从今年开始写写博客~~
08-02 6239
【vue3】defineSlots, useSlots, $slots 记录/讲解。插槽 ＜slot＞ / v-slot 的使用与讲解。仅支持 Vue 3.3+ 的版本。就因为新增了这API，让我写了这文章。 其他功能描述同 $slots 一致。 这个宏可以用于为 IDE 提供插槽名称和 props 类型检查的类型提示。 defineSlots() 只接受TS类型参数，没有运行时参数。也就是说你项目不是TS的话，就不用看这个了。 它还返回slots对象，该对象等同于在 setup 上下文中暴露或由us
Vue3 中插槽(slot)的用法
热门推荐
weixin_41489378的博客
02-03 4万+
Vue3 中插槽(slot)的用法 概要 Vue3（其实从2.6开始）中引入了一个新的指令v-slot，用来表示具名插槽和默认插槽 基础示例 <!-- default slot --> <foo v-slot="{ msg }"> {{ msg }} </foo> <!-- named slot --> <foo> <template v-slot:one="{msg}"> {{ msg }}
vue3源码分析——实现slots
twinkle的博客
06-20 2526
本期来实现， slot——插槽，分为普通插槽，具名插槽，作用域插槽，所有的源码请查看在 模板中使用插槽的方式如下： 在中的内容最终会被成render函数，render函数里面会调用h函数转化成vnode，在vnode的使用方法如下： 看完slots的基本用法，一起来实现个slots,方便自己理解slots的原理哦！😀😀😀使用slots的地方是this.slots，并且调用的属性是default,那么slots，并且调用的属性是default,那么slots则是一个对象，对象里面有插槽的...
Vue 3.0 Slot统一
2201_75866484的博客
03-24 195
此更改统一了 3.x 中的普通 slot 和作用域 slot。当你需要以编程方式引用作用域 slot 时，它们现在被统一到。大部分更改已经在 2.6 中发布。，2.x 用于在内容节点上定义。更多信息，请继续阅读！当使用渲染函数时，即。
在Vue中使用this.$store或者是$route一直报错的解决
10-16
今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决vue.js this.$router.push无效的问题
10-18
今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在Vue 3中，对于组件中的插槽（slots）生成进行了优化，以提高渲染性能和组件的更新速度。
weixin_64974855的博客
07-06 686
在Vue 3中，对于组件中的插槽（slots）生成进行了优化，以提高渲染性能和组件的更新速度。
vue 由slot插槽引出渲染函数render
记录点滴
05-05 2870
今天又看了一遍vue文档中的渲染函数，理解的差不多了，这里记录下，方便查阅，平时写的template组件vue内部通过正则匹配还是会编译成一棵虚拟节点树，最后放到渲染函数中去执行。 我们先用一个slot插槽的例子引出渲染函数： 很简单，Hello组件根据父组件传递的level值来判断渲染h1还是h2。 // Hello.vue <template> <div class="hello"> <h1 v-if="level===1"><slot&gt
Vue $slots.default
.
03-20 1万+
// 子组件demo <template> <div> <slot></slot> <slot name="up"></slot> </div> </template> <script type="text/ecmascript-6"> ...
Vue 3 迁移策略笔记—— 第22节：Slots 的统一
Jay的博客
01-27 4480
前言 本笔记主要基于官方文档《迁移策略—— Slot 统一》汇总而来。如有理解出入，请以官方文档为主。 知识储备 如果你并不属性 Vue 的渲染函数，需先了解一下知识： 《渲染函数 & JSX——基础》 《渲染函数&JSX——createElement 参数》 《vm.$slots》 《this.$scopedSlots 》 概述 Vue 3.x 统一了$slots 和 $scopedSlots: this.$slots 作为函数对位暴露 移除 this.$scopedSlots
【vue回顾系列】04-slot插槽最良心的使用总结，如果插槽还满足不了，可以试试h函数
庞囧的博客
01-23 1594
文章目录前言普通插槽旧版的写法新版的写法具名插槽作用域插槽 前言 自己写代码的时候从来没有用过slot插槽，直到有一天看到公司有大佬用这个东西，好好看了一下之后就目瞪口呆了，原来这东西用好了这么牛，于是我开始想学一下关于插槽的基本用法。 普通插槽 旧版的写法 父组件 <template> <div> <slotTest> {{'传一句话'}} // 这就是插进子组件的内容 </slotTest>
用这招监听 Vue 的插槽变化
粉丝们务必加入微信粉丝群
04-25 839
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub已收录，有一线大厂面试完整考点、资料以及我的系列文章。快来免费体验ChatGpt plus版本的，我们出的钱体验地址：https://chat.waixingyun.cn可以加入网站底部技术群，一起找bug。主要讨论了编写替代文本（alt text）时的五个常见错误。替代文本用于为视觉受限的用户提供图像的文字描述。
vue3中slot爆红
07-29
在Vue 3中，slot（插槽）的用法发生了一些变化。在Vue 2中，我们可以使用具名插槽（named slots）和作用域插槽（scoped slots），但在Vue 3中，这些概念被统一为了一个新的语法。 在Vue 3中，插槽被称为`<slot>`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值