插槽的使用

126 阅读1分钟

v2-9f5c6c54ba2e5bd1773ed6c7a18aa2ea_r.jpg

什么是插槽?

插槽就是子组件中的提供给父组件使用的一个占位符,用 <slot> </slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签

插槽的使用

1、具名插槽

具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中

示例代码:

子组件

image.png

父组件

父组件通过 v-slot:[name] 的方式指定到对应的插槽中

image.png

2、默认插槽

默认插槽就是指没有名字的插槽,子组件未定义的名字的插槽,父级将会把未指定插槽的填充的内容填充到默认插槽中

示例代码:

子组件

image.png

父组件

image.png

3、作用域插槽

作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

使用方法:

  1. 子组件存放一个带数据的插槽: mylist和title是子组件传给父组件的参数
  2. 父组件通过 “slot-scope” 来接收子组件传过来的插槽数据,再根据插槽数据来填充插槽的内容

示例代码:

父组件

image.png

子组件

image.png