- 匿名插槽
//组件调用时写成双标签,类似于react中的children <HelloWorld msg="666" > <div>我是丰富的内容</div> </HelloWorld>
在组件内部放置一个slot标签占位,将来双标签中的内容就放置到这里
<template>
<div class="hello">
hello 插槽!
{{msg}}
<slot></slot>
</div>
</template>
- 具名插槽
定义时:
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
<HelloWorld msg="666" >
<template v-slot:header>
<div >我是丰富的内容</div>
</template>
<template v-slot:footer>
<div>我想显示到hello之下</div>
</template>
</HelloWorld>
- 作用域插槽
定义时:
<template>
<div class="hello">
<!-- <slot name="header"></slot> -->
hello 插槽!
{{msg}}
<!-- <slot name="footer"></slot> -->
<span>
<slot v-bind:user="userInfo">
</slot>
</span>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
userInfo:{
lastName:'wenqiang',
firstName:'guo'
}
}
},
props: {
msg: String
}
}
</script>
<HelloWorld msg="666" >
<template v-slot:default="parentPropNames">
{{ parentPropNames.user.firstName }}-{{parentPropNames.user.lastName}}
</template>
</HelloWorld>