vue extends 页面模版

Question

问题描述

使用vue的extends，mixins制作页面模版。 
如何继承template，或是有更好的模版方式？

问题出现的环境背景及自己尝试过哪些方法

正在使用vue(vue-cli)制作一个极多子页面的网页app。这些子页面通常有固定几种形式，比如左侧列表右侧明细，同时有增/删/取消/确认四个按钮。因此制作一些通用的模版很有用。 
此时产生了使用extends来制作和继承模版的想法：
extends中，data/methods等选项都很容易理解和使用， 
主要是template的内容，测试发现template是会覆盖的，继承者必须完全兼容被继承组件的template内容才能达到效果。或者继承者的template为空，就会使用被继承组件的template，但这没用。

相关代码

// App.vue
...<script>import ExtendsSample from './components/ExtendsSample.vue'export default {  name: 'App',  extends: ExtendsSample,
  data () {
...

你期待的结果是什么？实际看到的错误信息又是什么？

希望找到能有部分template继承性的模版方式

Answer 1

用父子级的嵌套组件