插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签,当一个组件有不确定的结构时, 就需要使用 slot 技术
注意:插槽内容是在父组件中编译后, 再传递给子组件的
插槽的使用
1.在子组件中放一个占位符
2.在父组件中给这个占位符填充内容
插槽的使用 - 具名插槽
- 子组件的代码,设置了两个插槽(header和footer):
- 父组件填充内容, 父组件通过 v-slot:[name] 或 #[name]的方式指定到对应的插槽中
插槽的使用 - 默认插槽
1.子组件代码定义了一个默认插槽:
2.父组件给默认插槽填充内容
插槽的使用 - 作用域插槽
- 子组件存放一个带数据的插槽: mylist和title是子组件传给父组件的参数
- 父组件通过 “v-slot:[name]”或 “#[name]” 来接收子组件传过来的插槽数据,再根据插槽数据来填充插槽的内容
- 常用场景(以下为常用的情况之一)如果子组件中的某一部分的数据,每个父组件都会有自己的一套对该数据的不同的呈现方式,这时就需要用到作用域插槽。