插槽

普通插槽

1. 在子组件中写插槽

<template>
  <div class="common-slot">
    <h2>普通插槽</h2>
    <slot></slot><br/>
    <slot></slot>
  </div>
</template>

2. 在父组件中使用插槽

<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接受数据