平时在项目中很少用到Vue的继承特性，通常是封装单文件组件，然后在其他组件中引入。继承是面向对象程序设计的一个核心概念之一，通过它可以实现子类对父类的数据和功能的复用，同时还可以选择性地覆写父类的属性和方法。那么，前端组件开发如何利用这个特性呢？
最近刚好碰到一个应用场景，某个业务模块的各个页面在结构上几乎完全一致，区别只在于里面的数据。首先想到的实现方式是封装成一个组件，然后在各个页面中引入，通过props传递不同的数据来区分不同行为。但这种方式需要在组件里做各种判断，每多一个页面类型就需要增加一个条件分支，这样就违背了面向对象设计里的“开发-封闭”原则，不利于以后的扩展。
页面结构
该业务模块是要展示多个统计指标的趋势，页面包含一个走势图和报表，以及一些条件筛选控件。每个指标的页面几乎都是一样的。使用继承，刚好可以解决这个问题。定义一个基类页面，包含页面模板和公共属性和方法，各数据指标页面作为子类继承该基类，这样就拥有了同样的页面模板和事件绑定，只需要在子类覆写事件处理方法就能实现不同统计指标展示不同数据。
Vue 支持组件的继承，在单文件组件里指定extends即可：
基类组件代码大致如下：