<div id="navCategory"></div><p>Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过，但是你是否了解它全部用法呢？本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。</p> 讯享网
简单来说就是子组件中的提供给父组件使用的一个 ，用 表示，父组件可以在这个坑位中填充任何模板代码然后子组件中 就会被替换成这些内容。比如一个最简单插槽例子
子组件中的 便是父组件放在子组件标签 之间的内容。当然这之间你可以传入任何代码片段，都会被放到 这个位置。
同样的你也可以在标签 之间放入变量，比如
先解释一下后面频繁出现的两个词 和 ，防止后面阅读搞混了：
同样的 表示的就是这个 变量。所以子组件 是可以访问到父组件的数据作用域，而 是无法访问子组件的数据（即父组件中两个 之间是不能使用子组件中的数据的），这就是所谓的渲染作用域。后面会介绍 向 传参的方式
在父组件没有提供任何 的时候，我们是可以为子组件的 指定默认内容的，比如
此时 展示默认内容
展示提供的内容
很多时候一个 满足不了我们的需求，我们需要多个 。于是就有了 ，就是具有名字的 。简单来说这个 的目的就是让一个萝卜一个坑，让它们呆在该呆的位置去。比如带 的插槽 被称为具名插槽。没有提供 的 会隐式地命名为“default”。在父组件中可以使用 （可简写为 ） 指令的 元素将目标插槽的名字传下去匹配对应 。比如
所以父组件中无需在意顺序，只需要写好模板命好名，它就会自动去到它所对应的位置。
动态插槽名就是插槽名变成了变量的形式，我们可以随时修改这个变量从而展示不同的效果。它的写法是 或者缩写为 。
上面说过 是无法访问子组件的数据的，但是如果我们想在 访问子组件的状态该怎么办呢？
其实 可以像对组件传递 props 那样，在 标签绑定属性从而传递给父组件中的 。首先来看下默认插槽的传值方式
你还可以以结构的形式获取 提供的数据
注意不能绑定 属性，因为你绑定了 它就成了具名插槽了。同样具名插槽中的 属性也不会传递给 。因为传递的参数只能在 中使用，所以这类能够接受参数的插槽就被称为了 。
下面再看下 它的传参方式。它接收参数的方式是通过 标签的指令 的值获取的，所以可以缩写成这样
这类插槽便是 啦
到这里 (slot)的全部用法基本就已经介绍完啦。
到此这篇关于Vue3中插槽(slot)用法汇总的文章就介绍到这了,更多相关Vue3 插槽slot内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/171466.html