vue3 插槽笔记

最新推荐文章于 2024-05-23 22:55:00 发布
最新推荐文章于 2024-05-23 22:55:00 发布
阅读量200 收藏
点赞数
分类专栏： Vue 文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aexwx/article/details/124607593
版权

v-slot:default="slotData"可以简写成#default="slotData"

v-slot:ak可以简写成#ak，对应slot标签中的name值

而在slot标签中，除了name属性，还可以自定义其他属性，这些值可以反向传递给外层模板

大猫会长
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE3笔记 VUE3 VUE
01-02
4. **Teleport**：Vue3引入了`<teleport>`，允许将特定的元素“传送”到DOM树的其他位置，比如用于解决模态框、弹窗等组件定位的问题，避免了嵌套的`v-if`或者插槽带来的复杂性。 5. **Fragment & Comment**：Vue3...
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要的生命周期钩子函数。`mounted` 在页面初次加载时调用，而 `updated` 在数据改变并且要在页面重新渲染完成之后调用。...
记录 Vue3插槽笔记
NoNamePeople的博客
12-29 319
** 记录 Vue3插槽笔记 ** <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
Vue 3 学习笔记
最新发布
qq_46735055的博客
05-23 1246
禹神最新Vue3教程学习笔记
尚硅谷vue3学习笔记
2302_77862232的博客
01-07 2178
setup`是`Vue3`中一个新的配置项，值是一个函数，它是 `Composition API` ，组件中所用到的：数据、方法、计算属性、监视......等等，均配置在`setup`中。特点如下：- `setup`函数返回的对象中的内容，可直接在模板中使用。- `setup`中访问`this`是`undefined`。- `setup`函数会在`beforeCreate`之前调用，它是“领先”所有钩子执行的。姓名：{{ name }}
vue3学习笔记
north_katydid的博客
03-27 457
vue3 学习笔记持续更新
Vue3学习笔记
lirtyuj的博客
07-22 555
vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，提供了一套声明式的、组件化的编程模型，帮助更高效的开发用户界面。
Vue插槽笔记
qq_38304572的博客
01-09 362
插槽有三类：默认插槽，具名插槽，作用域插槽 使用方式： 1.默认插槽： 父组件中： <template> <div id="app"> <classification title="电影"> <p>这是电影</p> </classification> <classification title="电视剧"> </classification> </div> <
狂神说Vue笔记整理
热门推荐
qq_46138160的博客
12-11 10万+
狂神说Vue笔记 ​ 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。 一、前端核心分析 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管
Vue3学习笔记（尚硅谷天禹老师）
2301_76201197的博客
01-03 5707
Vue3相较于Vue2打包大小减少41%；初次渲染快55%，更新渲染快133%；内存减少54%。
前端笔记(7) Vue3 插槽slot的使用案例
Java Spring Elasticsearch
08-08 672
在上一篇博客Vue3 dialog弹窗 父子组件之间传值及方法调用中已经介绍了如何给子组件传递参数，但是如何给子组件传递模板内容呢？这个就需要用到插槽slot了。首先最基础的一点：插槽是放在子组件上的，相当于子组件有一个坑，父组件可以传模板给子组件，来填这个坑。子组件接收参数，用props子组件接收模板，用slot。......
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
2023-3-3 vue2和vue3学习笔记PDF版
03-03
这份"2023-3-3 vue2和vue3学习笔记PDF版"可能会涵盖这些概念的详细解释，包括如何在实际项目中应用它们，以及如何从Vue 2平稳过渡到Vue 3。学习这些内容将有助于开发者更好地理解和使用Vue.js框架，提升开发效率和...
vue2+vue3笔记
07-14
Vue2+Vue3 笔记 一、mounted 和 updated 的区别 mounted是在页面初次加载时调用，而updated是在数据改变并且要在页面重新渲染完成之后触发的，但如果只是改变数据的值，而没有重新渲染该值，那么updated方法不会被...
transpileDependencies与babel编译顺序释义
大赚万万亿
09-07 1万+
如果transpileDependencies为true或为正则，接着再看package.json里的browserslist是否处在低级浏览器范围，如果处在低级浏览器范围内，那么会把node_modules里用得到的高级语法进行babel编译。如果transpileDependencies为false,则会把node_modules里用到的高级语法原封不动的打包，会造成在低级浏览器访问报错的情况。babel.config.js配置如下，此配置同样适用于vue-cli999。
charles开发微信网页及调试方法
大赚万万亿
06-22 4498
开发环境下进行微信网页开发
vue各个生命周期可用data和props的时机说明
大赚万万亿
01-28 3408
【代码】vue各个生命周期可用data和props的时机说明。
vue3非打包直接用的配置
大赚万万亿
04-25 1328
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>演示例子</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.31/vue.global.prod.min.js"></script> </head> <body> &l.
vue默认插槽、具名插槽、作用域插槽笔记
11-02
Vue组件的插槽是一种抽象的概念，用于分发组件的内容。Vue提供了三种类型的插槽：默认插槽、具名插槽和作用域插槽。 默认插槽是没有名字的插槽，可以在组件模板中使用<slot>标签来定义。当组件没有具名插槽时，所有没有被包裹在具名插槽中的内容都会被传递到默认插槽中。 具名插槽是有名字的插槽，可以在组件模板中使用<slot name="xxx">标签来定义。当组件中有多个插槽时，可以使用具名插槽来指定要分发的内容。 作用域插槽是一种特殊的插槽，可以让父组件向子组件传递数据。作用域插槽可以在组件模板中使用<slot>标签来定义，并且可以使用一个带有参数的函数来向插槽中传递数据。 例如，下面是一个使用作用域插槽的例子： ```html <template> <div> <slot v-bind:user="user"> {{ user.lastName }} </slot> </div> </template> <script> export default { data() { return { user: { firstName: 'John', lastName: 'Doe' } } } } </script> ``` 在父组件中，可以这样使用这个组件： ```html <template> <div> <user-profile> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> </user-profile> </div> </template> <script> import UserProfile from './UserProfile.vue' export default { components: { UserProfile } } </script> ``` 这个例子中，父组件向子组件传递了一个名为user的数据对象，并且在插槽中使用了一个带有参数的函数来向插槽中传递数据。在插槽中，可以使用slotProps来访问传递进来的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值