插槽(slot)
-
插槽是什么?
当引用组件时,我们可以向组件的标签中嵌入内容。这些内容可以嵌入到子组件中,但是需要使用插槽机制即,slot; -
如何使用插槽
- 首先在创建子组件时需要声明一个 slot 标签占位;
- 在组件标签中嵌入内容
- 具名slot和匿名slot
-
匿名 slot,在声明 slot 时不写 name 属性,嵌入在组件标签中没有写 slot 属性的标签都会放在匿名 slot 中
-
具名 slot,在声明 slot 时要写上 name 属性;嵌入在组件标签中的内容需要指定 slot=“slot的名字”
• slot:内置的组件:可以将父组件中的子组件里面的模板数据(标签的内容)进行显示
• 具名插槽
• slot属性值和子组件中slot插槽中的name属性对应
• 子组件的slot组件上的name属性会和父组件中的slot属性进行匹配,并按照子组件的顺序显示对应的模板数据
• 没有name属性的slot会解析默认的标签
• 作用域插槽
• slot-scope:作用域插槽;可以让我们在父组件这个位置取到子组件的数据
• 能够让父组件使用子组件中的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport