什么是插槽(slot)
插槽允许开发者开发自己的组件时,预留位置给使用组件者传递而来的数据
slot 元素是一个插槽出口 (slot outlet),标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。
简单使用方法
代码:
父组件
<div id="app">
<header1>
<!--header1是用户自己封装的组件 -->
<!-- 默认情况下 填充内容都会被填充到名字叫default的插槽中 -->
<!-- 指定内容到某一插槽需要在一个template模板中 -->
<!-- 需要使用v-slot指定插槽 或者#+插槽名 -->
<!-- template模板是一个虚拟标签 不会被dom解析 不会被渲染为任何实质性的html元素 -->
123(这是用户想要对自定义组件输入的内容)
</header1>
</div>
header1子组件
如果不预留插槽位置
<div>
</div>
效果
header1预留插槽位置
<div>
<slot></slot>
</div>
效果
当组件渲染的时候 父组件在子组件首位标签的值会渲染到子组件slot标签中,而如果子组件中没有slot标签,父组件传递来的值会被舍弃
具名插槽
当子组件中需要用到的插槽有多个的时候,可以使用具名插槽来区分插槽,也就是给插槽取名字。
使用方法
在子组件的slot元素中附上name属性即可给插槽命名 区分多个插槽
header1子组件
<template>
<div>
<slot name='title' msg="这是标题区 "></slot>
<br>
区分线-------------
<br>
<slot name='content' msg="这是内容区"></slot>
</div>
</template>
父组件
<template>
<div id="app">
<header1>
<!-- 默认情况下 填充内容都会被填充到名字叫default的插槽中 -->
<!-- 指定内容到某一插槽需要在一个template模板中 -->
<!--#+插槽名指定插槽 -->
<!-- template模板是一个虚拟标签 不会被dom解析 不会被渲染为任何实质性的html元素 -->
<template #title>
标题区的内容
</template>
<!--v-slot指定插槽 -->
<template v-slot:content>
内容区的内容
</template>
</header1>
<!-- <footer1></footer1> -->
</div>
</template>
效果图
作用域插槽
在有的时候需要在父组件中使用子组件才有的数据,这个时候需要用到作用域插槽
使用方法
header1子组件
其中msg属性也可以通过:或者v-bind进行动态绑定vue实例中data的数据
<template>
<div>
<slot name='title' msg="这是标题区 "></slot>
<br>
区分线-------------
<br>
<slot name='content' msg="这是内容区"></slot>
</div>
</template>
父组件接收msg
<template>
<div id="app">
<header1>
<template #title='scopeData'>
{{scopeData}}
</template>
<template v-slot:content='data2'>
{{data2}}
</template>
</header1>
<!-- <footer1></footer1> -->
</div>
</template>
效果图
可以看到子组件中插槽的msg属性的属性值通过作用域插槽作为一个对象传递到了父组件上