vue-插槽

作者: 东邪_黄药师 | 来源:发表于2021-08-09 23:00 被阅读0次
1. 什么是插槽

插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间,为用户预留的内容的占位符。


image.png
2. 插槽的基础用法

在封装组件时,可以通过 <slot> 元素定义插槽,从而为用户预留内容占位符。示例代码如下:


子组件.png
父组件.png

没有预留插槽的内容会被丢弃


没有预留插槽.png
封装组件时,可以为预留的 <slot> 插槽提供后备内容(默认内容)。如果组件的使用者没有为插槽提供任何内容,则后备内容会生效。示例代码如下:
后备内容.png
3. 具名插槽

如果在封装组件时需要预留多个插槽节点,则需要为每个 <slot> 插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下:
注意:没有指定 name 名称的插槽,
会有隐含的名称叫做“default”

image.png
3.1 为具名插槽提供内容

在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称。示例代码如下:


image.png
3.2 具名插槽的简写形式

把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header
可以被重写为 #header:


image.png
4. 作用域插槽

在封装组件的过程中,可以为预留的 <slot> 插槽绑定 props 数据,这种带有 props 数据的 <slot> 叫做“作用域插槽”。示例代码如下:


image.png
4.1 使用作用域插槽

可以使用 v-slot: 的形式,接收作用域插槽对外提供的数据。示例代码如下:


image.png
4.2 解构插槽 Prop

作用域插槽对外提供的数据对象,可以使用解构赋值简化数据的接收过程。示例代码如下:


image.png

相关文章

  • Vue-插槽

    什么是插槽? 插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代...

  • vue-插槽

    1. 什么是插槽 插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由...

  • vue-组件-插槽

    一、概要 插槽是指把任意内容插入指定的位置,而这个位置使用``作为占位符简单的来说就是在组件的某个节点内预留一个位...

  • Vue-使用插槽

    二。具名卡槽 作用域插槽:插槽循环时使用

  • Vue-组件-插槽

    通过插槽分发内容 子组件中 父组件中 上面这样无法直接显示出插入的Something bad happened. ...

  • vue-插槽slot

    默认插槽 app.vue app是父组件,test是子组件 test.vue 要想让父组件的www显示,必须要在子...

  • vue-组件化-插槽(slot)

    理解 Vue组件化中,当我们在设计一个组件的时候,可能会保留一部分,让使用者自定义的内容,比如: 导航栏组件中,右...

  • vue-组件插槽的使用

    总结 建议使用alert-com1组件的方式实现插槽功能,核心是子组件中使用slot

  • vue----slot插槽

    插槽分类 匿名插槽 具名插槽 作用域插槽

  • vue中slot插槽的使用

    插槽的种类:1、默认插槽、具名插槽、作用域插槽、解构插槽、动态插槽几种。转原文:https://www.jians...

网友评论

    本文标题:vue-插槽

    本文链接:https://www.haomeiwen.com/subject/qcvtbltx.html