在子组件中覆盖道具类型？

Question

我正在使用第三方组件，它期望道具是一种特殊类型。

我希望使用其他类型。

是否有一种方法可以覆盖子组件prop的类型？

还是我必须使用计算属性并将父组件中的prop修改为子组件所需的类型？

Answer 1

总的来说，我认为最好的方法是按照您的建议进行操作：“使用计算属性并将父组件中的prop修改为子组件所需的类型”。如果必须在多个地方执行此操作，则可以将逻辑外包到mixin中，只要使用给定的第三方组件，就可以导入该mixin。

如果不能修改父组件中的属性类型，则满足您需求的最佳方法是创建一个从第三方组件扩展的组件并覆盖所需的属性。 （https://vuejs.org/v2/api/#extends） 但是请记住，包含第三方的依赖项可能会随着时间的推移而更新。如果采用这种方法，您可能应该坚持使用固定版本。

我创建了一个有关如何扩展和覆盖组件的简单示例（您可以在此处以CodeSandbox的形式查看它：https://codesandbox.io/s/qq9y7nm8n4

App.vue：

<template>
  <div id="app">
    <h2>ExtendedComponent: </h2>
    <extended-component :message="1" />
    <h2>BaseComponent: </h2>
    <base-component message="This shall be a string" />
  </div>
</template>

<script>
import ExtendedComponent from "./components/ExtendedComponent";
import BaseComponent from "./components/BaseComponent";

export default {
  name: "App",
  components: {
    ExtendedComponent,
    BaseComponent
  }
};
</script>

BaseComponent.vue：

<template>
  <div>
    <h3>prop type: {{ typeof message }}</h3>
  </div>
</template>

<script>
export default {
  name: "BaseComponent",
  props: {
    message: {
      type: String,
      required: false
    }
  }
};
</script>

ExtendedComponent.vue：

<script>
import BaseComponent from "./BaseComponent";

export default {
  name: "ExtendedComponent",
  extends: BaseComponent,
  props: {
    message: {
      type: Number,
      required: false
    }
  }
};
</script>