如何正确继承 Typescript 中的父组件？

Posted 2023-02-23

【中文标题】如何正确继承 Typescript 中的父组件？

【英文标题】：How to correctly inherit from a parent component in Typescript?

【发布时间】：2021-02-21 13:12:28

【问题描述】：

我正在使用带有 Typescript 的 Vue v2，并且我正在尝试扩展父类：

我的父类名为BaseSelect，如下所示：

<template>
  <select :value="value" @change="$emit('change', $event.target.value)">
    <option value="">default option</option>
    <slot />
  </select>
</template>

<script lang="ts">
import  Component, Model, Vue  from 'vue-property-decorator';

@Component()
export default class BaseSelect extends Vue 
  @Model('change',  type: String, required: false, default: '' )
  private readonly value!: string

  private valid = true;

  validate(): boolean 
    this.valid = !!this.value;
    return this.valid;
  

</script>

我的子班BaseSelectGender 看起来像这样：

<template>
  <base-select :value="value" @change="$emit('change', $event)">
    <option value="male">I'm male</option>
    <option value="female">I'm female</option>
  </base-select>
</template>

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

@Component(
  components:  BaseSelect 
)
export default class BaseSelectGender extends BaseSelect 
</script>

当我在代码中使用<base-select-gender> 时，有两个BaseSelect 组件实例（因此有两个不同的valid 变量实例）：

由于继承而创建的第一个实例 第二个实例是因为在子进程中使用<base-select> 而创建的

当valid 变量发生变化时，这会导致一些问题，因为该变量的错误实例反映在 DOM 中。

所以我现在的问题是：如何扩展基类并使用它，或者至少扩展子组件模板部分中的 html 代码？

【问题讨论】：

你弄明白了吗？ :)

@Boern 是的，但这只是一种解决方法。我将在下面添加它作为答案。

【参考方案1】：

解决方法

所以我找到了一种解决方法，我使用ref 属性来访问“内部”组件（template 部分中的那个）的属性和方法。

这允许我手动同步我需要的所有属性（确保所需的属性没有private 修饰符）。

我的BaseSelectGender 组件现在看起来像这样：

<template>
  <base-select 
    :value="value" 
    @change="$emit('change', $event)"
    v-bind=" ...$attrs, ...$props "
    ref="inner"
  >
    <option value="male">I'm male</option>
    <option value="female">I'm female</option>
  </base-select>
</template>

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

@Component(
  components:  BaseSelect 
)
export default class BaseSelectGender extends BaseSelect 
  get inner() 
    return this.$refs.inner as BaseSelect;
  

  setValid(valid: boolean) 
    this.valid = valid;
    this.inner.setValid(valid);
  

  validate(): boolean 
    this.valid = this.inner.validate();
    return this.valid;
  

</script>

专业提示：使用v-bind=" ...$attrs, ...$props " 将所有的属性和道具从外部组件传递到内部组件。