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

用父子级的嵌套组件

Answer 2

我也碰到了这样的需求，研究了半天vue源码，找到了方案啦~
子组件这样用即可

    render(h) {
        var superRendered = this.$options.extends.render.apply(this, arguments)
        if (this.uiSet) {
            var button = <el-button>确定</el-button>
        }
        return <div>{superRendered}{button}</div>
    }

superRendered就是父组件模板渲染的结果！this.$options.extends.render.apply(this, arguments) 这句是关键。