目的

开发一个Panel组件，该组件具备面板的特性，如打开，关闭。具体业务组件继承该面板，处理自己的业务逻辑。

组件组合和内容分发的实现

基于上面的目的，我考虑过组件组合和内容分发：

// Panel.vue
<template>
  <div class="panel">
    <div class="header">我是面板标题</div>
    <div class="body">
      <slot name="body"></slot>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Panel',
    methods: {
      open () {},
      close () {}
    }
  }
</script>

// UserEditor.vue
<template>
  <panel>
    <div slot="body">...</div>
  </panel>
</template>

继承实现方式

上面的实现方式UserEditor.vue并不是一个Panel，只是一个普通组件使用了Panel组件，我希望的是UserEditor.vue它是一个Panel，具备Panel的特性，但也有自己的业务逻辑实现。所以我想继承Panel，但是我不知道如何将子组件（这里的父子我是指继承，而不是包含）的模板放到父组件的slot中。

<template>
  <div slot="body">...</div>
</template>
<script>
  import Panel from 'panel'
  export default {
    extends: Panel
  }
</script>
//这代码会覆盖`Panel`的模板。