Vue2+TypeScript中如何正确继承父组件并扩展模板？

你遇到的问题本质是同时做了组件类继承和模板嵌套父组件实例导致的双重实例冲突：子组件BaseSelectGender继承了BaseSelect的类，所以它自身拥有父类的valid属性和validate方法；但你在子组件模板里又渲染了一个独立的<base-select>组件，这是一个全新的BaseSelect实例，它有自己独立的valid和value状态。两者完全是不同的对象，所以当你修改继承来的valid时，DOM显示的却是模板里那个实例的状态，自然出现错误。

下面给你两种可行的解决方案：

方案1：重写子组件模板，复用父类逻辑 #

既然你想继承父组件的业务逻辑（比如validate方法），可以直接重写子组件的模板，不需要嵌套父组件实例，这样整个组件只有一个实例，状态完全统一：

<template>
  <!-- 直接复用父组件的模板结构，替换选项内容 -->
  <select :value="value" @change="$emit('change', $event.target.value)">
    <option value="">default option</option>
    <option value="male">I'm male</option>
    <option value="female">I'm female</option>
  </select>
</template>
<script lang="ts">
import { Component } from 'vue-property-decorator';
import { BaseSelect } from '@/components/base';

@Component
export default class BaseSelectGender extends BaseSelect {}
</script>

这种方式简单直接，适合模板修改量不大的场景，但缺点是会重复父组件的模板代码。

方案2：用Render函数复用父组件渲染逻辑（推荐） #

通过Vue的Render函数，你可以复用父组件的渲染逻辑，动态替换插槽内容，既避免重复代码，又保证只有一个组件实例：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { BaseSelect } from '@/components/base';

@Component
export default class BaseSelectGender extends BaseSelect {
  render(h: Vue.CreateElement) {
    // 调用父组件的Render函数获取原始虚拟节点
    const parentVnode = super.render(h);
    
    // 替换虚拟节点的子元素（即原插槽内容）为自定义选项
    parentVnode.children = [
      h('option', { attrs: { value: '' } }, 'default option'),
      h('option', { attrs: { value: 'male' } }, "I'm male"),
      h('option', { attrs: { value: 'female' } }, "I'm female"),
    ];
    
    return parentVnode;
  }
}
</script>

这种方式完全复用了父组件的模板逻辑，只修改需要自定义的部分，同时保证整个组件只有一个实例，valid和value状态完全同步，调用validate方法也能正确作用到当前组件的状态上。

额外注意事项 #

• 在Vue2的组件继承中，子组件如果没有定义自己的template或render函数，会自动继承父组件的模板；
• 如果你需要重写父组件的生命周期钩子（比如mounted），记得调用super.mounted()来执行父组件的逻辑；
• 父组件中用@Model装饰的value属性是只读的，子组件可以正常使用，但不要尝试修改它，通过$emit('change', newValue)来更新即可。

内容的提问来源于stack exchange，提问作者winklerrr