vue中的slot插槽的使用

张帆X

已于 2022-09-16 11:48:07 修改

阅读量137

点赞数

分类专栏： vue2 文章标签： vue.js 前端 javascript

于 2022-09-15 16:50:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_67490903/article/details/126874712

版权

vue2 专栏收录该内容

6 篇文章

订阅专栏

Vue中的插槽提供了一种将内容插入到组件内部模板的方法。插槽包括匿名插槽（默认插槽）、具名插槽和作用域插槽。匿名插槽无需指定name属性，而具名插槽通过name属性定义多个插入点。v-slot简写形式允许更简洁的语法。在示例中，父组件通过#libai具名插槽传递内容到子组件的特定位置，展示了如何使用插槽定制组件的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是插槽？
我们知道，在vue中，引入的子组件标签中间是不允许写内容的。为了解决这个问题，官方引入了插槽(slot)的概念。

插槽，其实就相当于占位符。它在组件中给你的HTML模板占了一个位置，让你来传入一些东西。插槽又分为匿名插槽、具名插槽以及作用域插槽。
匿名插槽
匿名插槽，我们又可以叫它单个插槽或者默认插槽。与具名插槽相对，它不需要设置name属性。
具名插槽
上面已经说过，插槽有一个name属性。与匿名插槽相对，加了name属性的匿名插槽就是具名插槽。跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:libai 可以被重写为 #libai。

子组件

<template>

<div class="box">

<slot name="libai"></slot>

<div style="color:red">床前明月光，疑是地上霜。</div>

<div style="color:blue">举头望明月，低头思故乡。</div>

</div>

</template>

父组件

<template>

<div class="home">

<son-slot></son-slot>

</div>

</template>

在插槽里面写入内容后

父组件

<template>

<div class="home">

<son-slot>

<template #libai>

<h1>静夜思</h1>

<h3>李白</h3>

</template>

</son-slot>

</div>

</template>

每天学一点，迟早成仙！！！