插槽

插槽

在父组件中复用子组件时，子组件中展示内容/结构由父组件来告知。

slot

(1)匿名插槽

第一步：在子组件中添加一个slot标签，用来展示父组件传递的内容（可以是数据也可以是html结构）

<template>
<div>
    <!-- 插槽 -->
    <slot></slot>
    <slot></slot>
</div>
</template>

只要在子组件中设置了slot标签，就可以在父组件中来分发内容，并且将分发的内容展示在插槽的位置上。

第二步：在父组件中使用子组件时，在子组件内部传递数据或者html结构

<script>
import index from './components/index'
export default {
	components:{ index }
}
</script>
<template>
	<div class="page">
		<index>
			<!-- 
				给子组件追加额外内容 
				此处内容可以是html代码
			-->
			<h1>这是首页</h1>
			<p>文本内容</p>
		</index>
	</div>
</template>

(2)具名插槽

在子组件中添加slot标签给它设置name属性，用来区分不同的插槽，把父组件分发的不同内容展示在不同的插槽位置上。

<slot name="top"></slot>
<slot name="bottom"></slot>

在父组件使用子组件时，给追加的内容添加上slot属性，就可以把指定的内容放到指定的插槽上。

<index>
    <h1 slot="top">这是首页</h1>
    <p slot="bottom">文本内容</p>
</index>

(3)作用域插槽

希望父组件控制插槽展示的内容，子组件提供数据

当子组件做循环或者它的某一部分内容由父组件来分发，这种场景要用到作用域插槽。

子组件遍历数据

<template>
    <div>
        <p>child组件</p>
        <ul>
            <slot name="list" v-for="item of arr" :item="item"></slot>
        </ul>
    </div>
</template>
<script>
export default {
    data(){
        return{
            arr:[ 'web前端','ui设计','java开发']
        }
    }
}
</script>

父组件分发子组件中要展示的html结构

<child>
    <!-- 作用域插槽 -->
    <template v-slot:list="props">
    	<li>{{ props.item }}</li>
    </template>
</child>