普通插槽
- 在子组件中写插槽
<template>
<div class="common-slot">
<h2>普通插槽</h2>
<slot></slot><br/>
<slot></slot>
</div>
</template>
- 在父组件中使用插槽
<template>
<div class="point-page">
<common-slot>
<span>普通插槽使用</span>
<span style="color: red">普通插槽使用</span>
</common-slot>
</div>
</template>
<script>
import CommonSlot from './slot/common.vue'
export default {
name: '',
components: {
CommonSlot
},
具名插槽
<template>
<div class="has-name">
<h2>具名插槽</h2>
<div class="hehe">
<slot name="left" class="left" ></slot>
<slot name="right" class="right"></slot>
</div>
</div>
</template>
使用
<hasName>
<template #left>
<a-space>
<a-button type="primary">Button</a-button>
</a-space>
</template>
<template #right>
<a-button type="link">
右边
</a-button>
</template>
</hasName>
作用域插槽
数据在子组件中,传给父组件
<template>
<div class="area">
<h3>作用域插槽</h3>
<slot :list="list"></slot>
</div>
</template>
data () {
return {
list: ['1', '2', '3']
}
},
使用
<AreaName>
<template scope="list">
{{list}}
</template>
</AreaName>
必须使用template接受数据
