組件繼承以及父子模板的混合?

目的

開發(fā)一個Panel組件，該組件具備面板的特性，如打開，關(guān)閉。具體業(yè)務(wù)組件繼承該面板，處理自己的業(yè)務(wù)邏輯。

組件組合和內(nèi)容分發(fā)的實現(xiàn)

基于上面的目的，我考慮過組件組合和內(nèi)容分發(fā)：

// Panel.vue
<template>
  <div class="panel">
    <div class="header">我是面板標(biāo)題</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>

繼承實現(xiàn)方式

上面的實現(xiàn)方式UserEditor.vue并不是一個Panel，只是一個普通組件使用了Panel組件，我希望的是UserEditor.vue它是一個Panel，具備Panel的特性，但也有自己的業(yè)務(wù)邏輯實現(xiàn)。所以我想繼承Panel，但是我不知道如何將子組件（這里的父子我是指繼承，而不是包含）的模板放到父組件的slot中。

<template>
  <div slot="body">...</div>
</template>
<script>
  import Panel from 'panel'
  export default {
    extends: Panel
  }
</script>
//這代碼會覆蓋`Panel`的模板。