Переопределить тип реквизита в дочернем компоненте?

Question

Я использую сторонний компонент, и он ожидает, что опора будет определенного типа.

Я хочу использовать другой тип.

Есть ли способ переопределитьтип дочернего компонента prop?

Или мне придется использовать вычисляемое свойство и изменить свойство в родительском компоненте в соответствии с типом, который требуется дочернему компоненту?

Answer 1

В общем, я думаю, что лучшим способом было бы поступить так, как вы предложили : «использовать вычисляемое свойство и модифицировать опору в родительском компоненте в соответствии с типом, который требуется дочернему компоненту».Если вам нужно сделать это в нескольких местах, вы можете перенести логику в миксин, который будет импортирован всякий раз, когда используется данный сторонний компонент.

Если изменение типа свойства в родительском компоненте isnНе вариант, лучший способ удовлетворить ваши потребности - создать свой собственный компонент, который выходит из стороннего компонента, и переопределить необходимое свойство .(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>