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

用父子级的嵌套组件