Vue3-22-组件-插槽的使用详解

最新推荐文章于 2024-06-21 09:55:16 发布

NorthCastle

最新推荐文章于 2024-06-21 09:55:16 发布

阅读量1.2k

点赞数 27

分类专栏： Vue3 文章标签： vue3 组件父子组件插槽

本文链接：https://blog.csdn.net/qq_39505245/article/details/135038230

版权

Vue3 专栏收录该内容

53 篇文章 0 订阅 ¥15.90 ¥99.00

订阅专栏

超级会员免费看

插槽是干啥的

插槽 就是 组件中的一个 占位符，
这个占位符 可以接收 父组件 传递过来的 html 的模板值，然后进行填充渲染。
就这么简单，插槽就是干这个的。

要说它的优点吧，基本上就是可以使子组件的内容可以被父组件控制，显得更加灵活。

插槽的关键字

slot : 就是定义插槽的关键字。

插槽的几个小分类

插槽从使用的特点上，可以分为以下几个小类：
1、普通插槽 ： 没有任何特殊性，最常规的那种；
2、默认值插槽 ： 自带默认值的插槽，父组件没有传值时，会自动渲染默认值；
3、具名插槽 ： 顾名思义，就是带名字的插槽，在组件中存在多个插槽时较为常用；
4、作用域插槽 ： xxxxxx

插槽的使用案例

下面的案例，基本上包含了插槽常见的使用操作。

1、最简单的使用

【子组件】中声明 <slot></slot> 插槽；
【父组件】中使用组件的时候，直接传入相应的值。

子组件

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

NorthCastle

关注关注

27
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
Vue3-22-组件-插槽的使用详解

Vue3 中组件的插槽的使用
复制链接

扫一扫

专栏目录

订阅专栏

vue自定义组件，插槽，自定义事件

while(True): print('adorable')

09-22

550

vue组件套娃1. vue自定义组件2. 组件和插槽套娃3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件语法 Vue.component('自定义组件名', { props: ['var1', 'var2', 'var3'], //每个属性可以和页面绑定值 template: '<p>{{ var1 }}</p>' // 自定义模板里面套html标签, 可以取属性的值 }) 第一个自定义组件 <script> Vue.

Vue3 插槽使用详解

白瑕的博客

06-25

1万+

一文搞懂Vue3插槽基本用法

参与评论您还未登录，请先登录后发表或查看评论

vue中插槽上手使用

你怎么也喜欢嘴巴嘟嘟

06-03

131

什么是插槽插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot>表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。首先接受项目目录结构上手小案例： Home.vue <template> <div>  <slot-test>sadfsdf</slot-tes

11-Vue中插槽（slot）的使用

最新发布

weixin_48053866的博客

06-21

1017

插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。插槽就是子组件中的提供给父组件使用的一个占位符，用表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。

【vue】组件中的插槽使用

python全栈

11-08

2728

直接写在组件中的内容，会填充到默认的插槽中（没有用name属性起名字的插槽）在组件中定义插槽的时候，给插槽中预留位置用在接收data中的传过来的数据；其他组件在使用这个组件的时候，可以获得该传递过来的数据。父组件中通过这种形式去子组件中填充内容(固定的)

vue3 插槽使用详解

蓑笠翁

03-05

1万+

vue slot插槽使用详解

vue(六)插槽

m0_51371862的博客

10-14

809

1. 什么是插槽插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。 2. 插槽的使用在封装组件时，可以通过 <slot> 元素定义插槽，从而为用户预留内容占位符。示例代码如下： <template> <p>这是MyCom1组件的p标签</p>  <slot>.

Vue 之插槽的使用，一次性给你说清楚

玄鱼殇

05-24

7126

插槽

Vue3插槽和事件

m0_72694993的博客

09-23

2511

2>子组件：其中需要调用defineEmits方法注册事件，通过emit变量接受submit参数，然后点击按钮的时候让其执行，emit("submit")；父组件中：调用子组件的时候传入@submit="处理函数"，当submit的时候触发，我们也可以自己定义这个submit，也可以换为别的变量，然后我们绑定事件处理函数。注意的是，其中的emit函数有两个参数，第一个参数事件名称，第二个参数是给事件处理函数出入参数。点击事件点击的时候就可以触发。可以通过传入的参数绑定样式。

Vue组件和插槽使用

汇而不置的博客

10-24

594

文章目录表单text 和 textreacheckbox 和radioselectcomputed与watchcomputedwatch组件组件的注册Vue.component()全局组件与局部组件dataprops组件的通信$emit()组件双绑的实现v-model.sync (处理多个prop外部绑定数据)update:[prop]插槽具名插槽作用域插槽props验证非prop特性替换/合并已...

详解Vue组件插槽的使用以及调用组件内的方法

10-17

以上介绍了Vue组件插槽的使用以及如何在父组件中调用子组件的方法。通过插槽的灵活运用，可以让组件更加具有扩展性；而通过`ref`来调用子组件的方法，则可以实现组件间的数据交互和行为控制。这两者的结合使用，可以...

vue3-zhihu项目

02-22

例如，Vue3使用Proxy代替Object.defineProperty实现数据响应，性能显著提升。 7. **TypeScript支持**：Vue3官方提供了对TypeScript的全面支持，鼓励开发者使用强类型来编写更健壮的代码。在vue3-zhihu-project中，...

vue element-ui之怎么封装一个自己的组件的详解

10-16

总的来说，封装Vue组件是开发过程中的关键步骤，它有助于创建可维护的代码结构和高效的工作流程。Element UI提供了丰富的基础组件，通过封装和扩展，我们可以构建出符合特定业务需求的组件库，进一步提升开发效率和...

详解vue使用插槽分发内容slot的用法

10-17

例如，在子组件testSlot.vue中，定义了一个标签，父组件app.vue中则通过<test-slot>标签来使用子组件，并传递需要显示在插槽位置的内容。 ```html  <h3>test-slot <slot>123 ...

vue三大组件-事件-插槽

qq_41249913的博客

09-19

1569

vue三大组件-事件对于vue中的组件时间, 主要分为两类普通事件修饰符事件通过@click, @input, @change, @xxx 等事件通过 this,$emit(“xxx”, …)触发 @input.trim, @click.stop, @sumit.prevent等, 一般用于原生html, 自定义组件需要自行开发支持(一般较少遇到) 对于一般的事件来说,...

Vue——插槽

weixin_43599321的博客

03-28

2221

插槽的作用：Vue插槽是Vue中常见的一种组件间的相互通信方式，作用是让父组件可以向子组件指定位置插入html结构，适用于，在要接收数据的组件页面通过标签来表示，简单来说，。插槽的基本使用：这里我们选定App.vue作为父组件，Card.vue作为子组件，作为演示插槽基本使用的代码文件。App.vue运行结果：从上面的运行结果可以看到，插槽的基本使用是子组件自身内容正常显示，插入的内容是父组件向子组件插入的内容，并且插入的内容可以显示多条，如果没有插入内容，将显示

Vue-几种插槽(slot)的使用

见证自己学习,成长的记录

06-22

1万+

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 ===> 子组件。

[ Vue ] 给 slot 插槽绑定事件

ljw1412的博客

10-11

1万+

最近写了一个下拉组件，希望任意形式的触发源点击都可以展开这个组件。最终效果图如下：方案一：slot-scope 传方法  <template> <slot change-display="changeDisplay"></slot> <div v-show="mVisiabl...

【Vue插槽详解】