2025年Vue插槽用法（vue3插槽）

科技前沿 • 2025-04-20 12:34 • 阅读 49

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p>

讯享网

我们经常会有封装组件的需求, 组件需要的往往不只有数据, 有时候我们要给一个模块做内容方面的可自定义, 比如我封装了一个黑板, 但是我有时希望上面是字, 又有时希望上面是图画, 这就要用到插槽了.

感谢你浪费一分钟生命读完了这段废话.

就是普通插槽, 也叫默认插槽.
只要你在子组件里写一个< slot></ slot>就可以从父组件向内部填充了.
虽然简单但是不写slot也是不能直接从父组件插内容的.
子组件:

讯享网

父组件:

在这里插入图片描述
讯享网
缺点就是不能规定父组件填充内容所指向的插槽, 父组件内填充的所有内容, 会填充到每个子组件内的插槽中:
子组件:

讯享网

父组件:

在这里插入图片描述
要解决这个问题就需要具名插槽了.

特点是带有name属性:

讯享网

v-slot:可以简写为“#”

讯享网

Vue官方文档: 没有被包裹在带有 v-slot: 的 < template> 中的内容都会被视为默认插槽内容.

从 2.6.0 开始，可以用方括号括起来的JS表达式作为一个指令(v-bind啥的)的参数,比如在此例中

讯享网

其实这个东西最常见的是在封装组件时, 我们用computed里的方法返回值来控制:class和:style:

讯享网

在2.6版本新增的内容中, 这种用法(动态指令参数)也可以用在具名插槽上定义动态的插槽名, 这其实是具名插槽的扩展用法, 你可以先看看具名插槽.

在子组件的slot上利用v-bind / v-for之类绑定上父组件需要的各种数据, 渲染时就可以从子组件拿数据来渲染.

讯享网

作用域插槽会被解析为一个传入了slotProps作参的函数:

讯享网

所以, 父组件中v-slot: 的值实际上可以是任何 [能作为函数的参数来传入] 的东西;

讯享网

这样我们有三个标签页了:
在这里插入图片描述

讯享网

就可以正常呈现了:
在这里插入图片描述

注意 v-slot 只能添加在 < template> 上, 不然会标红;

（现在是22年4月22, 我刚做完我的个人网站, 回来说一句, 不封装实在是——太乱了代码很多，就算复制粘贴下来到别处还要改属性改参数改样式，主要是还要改样式，老天！做了三个页面我就开始封装了。）

以上是我据本阶段的学习得出的一些经验与心得，如果帮到了您，在下十分荣幸；若是您发现了不足，您可以在评论区指出, 我会感谢您的指点的!

2025年Vue插槽用法（vue3插槽）

相关推荐