vue中的插槽

1.默认插槽

// 子组件

<template>

<div>

<slot></slot>

</div>

</template>

 

// 父组件

<template>

<ChildComponent>

<p>这是插槽中的内容</p>

</ChildComponent>

</template>

 

2.具名插槽

// 子组件

<template>

<div>

<slot name="header"></slot>

<slot name="main"></slot>

<slot name="footer"></slot>

</div>

</template>

 

// 父组件

<template>

<ChildComponent>

<template v-slot:header>

<h1>这是头部内容</h1>

</template>

<template v-slot:main>

<p>这是主体内容</p>

</template>

<template v-slot:footer>

<footer>这是底部内容</footer>

</template>

</ChildComponent>

</template>

 

 

3.作用域插槽

// 子组件

<template>

<div>

<slot :text="greetingText"></slot>

</div>

</template>

<script>

export default {

data() {

return {

greetingText: 'Hello from the child component!'

}

}

}

</script>

 

// 父组件

<template>

<ChildComponent>

<template v-slot:default="slotProps">

<p>{{ slotProps.text }}</p>

</template>

</ChildComponent>

</template>