vue slot插槽_vue居中盒子组件，学习插槽的简单用法（slot)

最新推荐文章于 2022-08-09 13:45:30 发布
最新推荐文章于 2022-08-09 13:45:30 发布
阅读量672 收藏 1
点赞数
文章标签： vue slot插槽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34681072/article/details/113323476
版权

5de3b6fc07d13a53b7b684a999386b50.png

前些日子，在整理活动开发的项目时，同事说要不要写一些基础的class，例如某一块内容的居中，然后最后我还是说服了他使用vue插槽去做一个居中组件

这里还有一个话题了：vue项目中css的管理是使用scope还是规范class命名或者CSS Module？？？？可以留言讨论一下，下篇文章讨论一下

这个讨论放在代码后面，下面先来看这个组件

插槽 — Vue.js​cn.vuejs.org
e89bbef9c1c407697a838e32ec0f1115.png

直接上代码

组件：

<template>
  <div class="center-box">
    <slot name="header"></slot>
    <div class="center-box-content">
      <slot name="content"></s
最低0.47元/天 解锁文章
stratisplatform
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue slot 插槽详解
derin1的博客
03-18 312
vue slot
Vue学习笔记（十三）——slot插槽（PART4）
讨厌走开啦
04-25 386
参考文档：https://cn.vuejs.org/v2/guide/ 本文主要介绍插槽的缩写和复用。 插槽的缩写： v-slot:可以缩写为#（类似v-on:可以缩写为@，v-bind:可以缩写为:），例：v-slot:default="slotProps"可以缩写为#default=“slotProps”，但不能写为#=“slotProps”（即缩写时缺省插槽名不能省略）。 以下为示例代码： ...
Vue一个案例引发「内容分发slot」的最全总结
weixin_33717298的博客
12-01 219
今天我们继续来说说 Vue，目前一直在自学 Vue 然后也开始做一个项目实战，我一直认为在实战中去发现问题然后解决问题的学习方式是最好的，所以我在学习一些 Vue 的理论之后，就开始自己利用业余时间做了一个项目，然后通过项目中的一些案例进行总结。 今天我们来说说 Vue 中的内容分发 &lt;slot&gt;，首先 Vue 实现了一套内容分发的 API，这套 API 是基于当前的 Web Comp...
HTML5：footer定位（底部+居中）的探讨+div图片居中问题
aofan9566的博客
12-29 557
初学HTML+CSS布局，尝试自己写一个百度首页，可是footer的定位遇到麻烦而且百度没有好的解决方法，在此记录下逐步的过程。记录之，备忘。 初学，解决方法难免出现不妥之处，也请看到这篇文章的前辈指点一二，在此先谢过。 首先是设置为 footer{ clear: both; display: block; position: absolute;...
dialog内部定位，按钮垂直居中
一方湖泊
01-26 1160
参考：https://www.bilibili.com/video/BV14J4114768?p=226
详解vue slot插槽的使用方法
08-30
本篇文章主要介绍了详解vue slot插槽的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解vue使用插槽分发内容slot的用法
10-17
主要介绍了vue使用插槽分发内容slot的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue插槽slot学习.xmind
05-29
vue插槽slot学习.xmind
vue插槽slot的简单理解与用法实例分析
10-15
主要介绍了vue插槽slot的简单理解与用法,结合实例形式分析了vue插槽slot的功能、原理、相关使用技巧与操作注意事项,需要的朋友可以参考下
vue学习笔记之slot插槽用法实例分析
10-15
主要介绍了vue学习笔记之slot插槽用法,结合实例形式对比分析了vue使用slot插槽的相关操作技巧与注意事项,需要的朋友可以参考下
Vue插槽slot的使用
有问题可关注公众号：前端研究院 后台输入问题回复
06-26 2999
vue官方文档中关于slot插槽的说明很简短，语言又写的很凝练,这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”的想法，于是就关闭了vue的说明文档。 一、slot的作用 Q: 假如父组件需要在子组件内放一些DOM元素，那么这些DOM是显示呢还是不显示呢？ 默认情况下是不会显示的，如下图所示，页面并没有显示父组件增加的我是魔鬼 元素内容。那么我执意要加DOM元素到子组件上该怎么实现呢？这就用到了slot插槽，使用slot这个标签可以将父组件放在子组...
一文详解Vue插槽slot的使用与案例展示，看完就彻底明白了
czjl6886的博客
12-23 6742
目录 一、插槽的含义 二、插槽的三种使用方法 1.默认插槽 2.具名插槽 3.作用域插槽 4.版本变化 插槽slot在实际的项目开发中是经常使用的，主要分为三大类：默认插槽、具名插槽和作用域插槽，也是比较容易上手的。 一、插槽的含义 插槽slot是写在子组件的代码中，供父组件使用的占位符。在代码中，大致写为如下的形式，后面会进行详细的写法介绍。 <slot> </slot> 插槽其实就是在写slot的地方挖个坑，等着组件的使用者，即父组...
插槽 Slots详解（看了不懂我陪）
weixin_51225684的博客
08-09 1983
插槽是什么？ 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。举例来说，这里有一个 组件，可以像这样使用： 而 的模板是这样的： 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。 最终渲染出的 DOM
vue slot插槽的小技巧
zhumengzj的博客
12-07 3968
如果想使用插槽，又不想添加都一个节点，那就把父组件的插槽的标签也改为slot 这样就可以了：如下 子组件： name="header"> 父组件： slot slot="header"> label="网点名称:" prop="rentingHouseName"> <el-autocomplete class="inline-input"
header+section+footer(底部按钮布局)
Cool的博客
09-29 6697
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;meta content="telephone=no" name=&quo
Vue中slot的使用（通俗易懂）
热门推荐
zhouzuoluo的博客
06-01 16万+
在vue中使用slot插槽个人理解：是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参；开发背景：正常情况下,&lt;Child&gt;&lt;span style=”color:red;”&gt;hello world&lt;/span&gt;&lt;/Child&gt;在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签C...
前端学习系列——（七）水平居中和垂直居中
随风丶逆风的博客
04-28 789
    居中是对称美的一种形式，所以在布局时经常要涉及到居中显示。以下为了方便展示，直接在使用内联样式，正常情况推荐使用外部css文件。一、水平居中（1）行级元素    方法：父元素设置text-align:center&lt;div style="width:300px;height: 100px;border: 1px solid #f00;text-align: center"&gt; ...
vue 里面的slot属性
前端技术的学习整理
05-25 15万+
总结如下：深入理解VUE中的槽与槽范围写在前面VUE中关于插槽的文档说明很短，语言又写的很凝练，再加上其和方法，数据，计算机等常用选项在使用频率，使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”的想法，于是就关闭了VUE的说明文档。实际上，插槽的概念很简单，下面通过分三部分来讲，这三部分也是按照VUE说明文档的顺序来写的。进入这三部分之前，...
【_ 記 】vue中的slot属性和slot样式自定义
骐骥筋力成，志在万里外
09-20 6947
slot属性的使用： slot代码 <el-tooltip placement="top" > <div slot="content" class="a6">增值税普通发票开始小规模纳税人或者开票资料不齐全的购买人，购买人取得后不可以进行进项税额抵扣。若 您还有疑问，建议联系贵公司财务确认后再提交开票需求。</div> <i cl...
vue插槽样式_vue里面slot样式不生效
最新发布
05-30
Vue插槽是一种非常强大的功能，但是有时候我们会遇到样式不生效的问题。这通常是因为插槽内的内容被包裹在一个子组件中，这个子组件的样式会覆盖插槽的样式。 解决这个问题的方法有几种： 1. 使用 `>>>` 或 `/deep/` 选择器来穿透子组件的样式，直接作用于插槽内部的元素。例如： ``` <template> <div> <slot name="foo"></slot> </div> </template> <style scoped> /* 以 /deep/ 选择器为例 */ /deep/ .slot-wrapper { color: red; } </style> ``` 2. 在子组件中通过 `inheritAttrs: false` 禁止继承父组件的属性和样式，然后在插槽中手动绑定需要的属性和样式。例如： ``` <template> <div> <slot name="foo" :class="$attrs.class"></slot> </div> </template> <script> export default { inheritAttrs: false } </script> ``` 注意：这种方法需要手动绑定所有需要的属性和样式，比较麻烦。 3. 在父组件中通过 `v-bind` 或 `v-bind:style` 将需要的属性和样式传递给插槽。例如： ``` <template> <div> <slot name="foo" v-bind="$attrs" v-bind:style="$attrs.style"></slot> </div> </template> ``` 注意：这种方法需要在父组件中预先定义好需要传递的属性和样式，比较麻烦。 希望以上方法可以帮助你解决问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值