vue3.0 插槽slot用法 （改了改了，和2.0用法不一样了）

最新推荐文章于 2024-08-21 20:18:11 发布
最新推荐文章于 2024-08-21 20:18:11 发布
阅读量5k 收藏
点赞数 1
分类专栏： vue vue组件篇 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39198394/article/details/113563061
版权
  • 今天在尝试3.0的功能，倒腾了一会写成之前的形式不起作用。
  • 现在改成大致这样的形式了
  • 建议直接看文档，挺清楚的

子组件

 <div class="dialog__footer" >
          <slot name="footer" />
        </div>

父组件

  <template v-slot:footer class="dialog-footer">
         footer
        </template>

在这里插入图片描述

Liszter
关注
专栏目录
vue3.2中使用slot插槽
Sun_blog
07-27 103
携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情 前言 本文主要记录了如何在vue3.2中使用slot插槽，包含具名插槽、默认插槽以及作用域插槽。 slot插槽 slot插槽可以将父组件的内容传递给子组件，常用于组件的复用和扩展。 初识slot 首先，我们创建两个组件，index.vue作为父组件，index1.vue作为子组件。 在父组件...
一起来看看这份集齐vue2.0/vue3.0面试通杀秘籍（2021版） PDF，面试官问的源码问题绝对稳了！
weixin_56134381的博客
06-15 859
趁着端午假期，熬夜将Vue 99%出镜率的高频面试题整理了一下。覆盖Vue3.0
vue3.0 slot
sinat_36017053的博客
11-09 339
slot
Vue3学习笔记之插槽
最新发布
weixin_52102740的博客
08-21 580
快速了解Vue插槽
vue3中的插槽
九仞山的专栏
06-09 1740
详细介绍了vue3中的插槽，从如何创建插槽、插槽的类型、插槽的高级用法及插槽的注意事项等方面进行了详细的介绍，并给出了示例代码
Vue3插槽
qq_55628994的博客
05-06 828
1.匿名插槽 <headerVue> <template v-slot> <div>我被插入了hhh</div> </template> </headerVue> <template> <div class="head"> <slot></slot> </div> </template&g..
vue3中插槽的使用
03-30 1万+
vue3中插槽的使用 文章目录vue3中插槽的使用匿名插槽具名插槽作用域插槽 插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，父组件填充的内容称为插槽内容。 子组件不提供插槽时，父组件填充失效 父组件无填充时，<slot></slot>中的备用内容会启用生效 父级模板里的所有内容都
vue3.0与echarts5.0
m0_73265535的博客
05-17 595
数据可视化这一概念自1987年正式提出，经过30余年的发展，逐渐形成3个分支：科学计算可视化(scientific visualization)、信息可视化(information visualization)和可视分析(visual analytics)。近些年来，这3个子领域出现了逐渐融合的趋势。我们统称为“数据可视化”。什么是数据可视化？顾名思义，数据可视化就是将数据转换成图或表等，以一种更直观的方式展现和呈现数据。
vue3及与vue2的区别总结（部分）
m0_67402774的博客
03-09 671
1.生命周期的变化：3.x(上） 2.x（下） 不难看出，vue3.0与vue2.0之间生命周期函数在销毁的时候有变化： beforeDestroy --> beforeUnmount destroyed --> unmounted 其他的区别主要在于书写使用的语言上的差别 在ts中使用 class 类组件书写可以 参考 vue-class-component 或者 vue-property-decorator 书写的风格和vue2.0的选项式区别不大。 如果使用js书写代码 则应当使用
Vue3.0项目---蜘蛛电影（解析）
weixin_43842821的博客
04-09 848
项目简介 蜘蛛电影主要是仿猫...
详解Vue3中的插槽（slot）
一起学习
12-23 1万+
本文主要介绍Vue3中的插槽（slot）。
Vue3插槽（Slot）详解
wxid_mtnujb6ipc0322的博客
10-10 3112
在Vue.js中，插槽是一种分发内容的机制，它允许我们在子组件中插入父组件的任何内容。简单来说，插槽就像一个占位符，我们可以在其中放置任何我们想要的内容。Vue3的插槽功能非常强大，它允许我们在组件间灵活地分发和接收内容。无论是默认插槽、具名插槽、作用域插槽还是动态插槽，都能满足我们在实际开发中的各种需求。
Vue三大核心之三(插槽)
Linux,Java,SpringBoot,Python,Lua略知一点
09-14 458
1.具名组件 我们一个组件里需要多个插槽,就需要用到slot的name属性 <!--子组件定义--> <div> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="foote
Vue slot简单实用
李嘉杰的博客
08-03 266
一直看到文档有slot插槽，简单看看文档然后用一下，不用了之后又忘了。现在稍微记一下。 1.&lt;slot&gt;&lt;/slot&gt;匿名插槽，这不知道咋回事我显示不出来。 2.&lt;div slot="test"&gt;  具名插槽。给父组件调用的时候给要插入的标签上挂个slot值，子组件slot标签name挂个值对应一下就好了。     &lt;p&gt;这里是父组件调用&lt...
Vue3 插槽使用详解
热门推荐
白瑕 的博客
06-25 1万+
一文搞懂Vue3插槽基本用法
vue3中插槽的详细使用笔记
NolanKy 的 技术博客
11-07 1697
文章目录一，插槽的作用二，样例三，具名插槽 一，插槽的作用 类似于你往电脑的卡槽中插内存卡啊等，简单来说，就是父组件向子组件传值的时候用的，在子组件中用 <slot ></slot>先预留出一个位置，然后父组件就可以在调用子组件的时候可以在子组件标签内部向子组件添加信息， 不是之前的数据传递，是模板数据的传递 二，样例 比如，我们现在先定义两个组件，一个父组件father，一个子组件son，父组件调用子组件 <template> <h1>我是父组件&l
vue3.0的插槽
qq_43505774的博客
07-27 2860
vue2.6 使用 父组件slot=“name” slot-scope=“data” 可以使用div或template vue3.0 使用父组件v-slot:name="data"或者#name=“data” 子组件 两个都一样 <p> <child> <template v-slot:tou="data">touj <span>{{data.data}}</span> </template> </child&
vue3.0不是2.0
04-10
Vue 3.0 是 Vue.js 框架的最新版本，相较于 2.0 版本，它带来了一些重要的改进和新特性。以下是 Vue 3.0 的一些主要变化和特点： 1. 更好的性能：Vue 3.0 在性能方面进行了优化，通过使用 Proxy 代替 Object....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值