【问题标题】：Vue - how to override a prop of a wrapper component?Vue - 如何覆盖包装器组件的道具？
【发布时间】：2025-12-20 13:25:06
【问题描述】：

我创建了一个包装器组件，它像这样包装一个 Quasar q-select：

<template lang="pug">
  q-select(
    :options="organisations"
    option-value="id"
    v-bind="$attrs"
    v-on="$listeners"
    :option-label="item => item.details.name"
    :label="$t('organisations.label')")
</template>

并将其命名为OrganisationSelect。我希望标签有一个默认值，取自i18n。现在，当我像这样使用这个组件时，我希望能够覆盖这个 :label 属性：

div.col-4
 OrganiastionSelect(
  :rules="[val => !!val || 'Please select an Organisation']"
  v-model='organisation'
  :label="$t('organisation.someOtherLabel')"
  dense
).col-6

它不使用这个标签someOtherLabel。它总是需要 internal 标签。

问题：

这样的道具覆盖可能吗？如果是，怎么做？

【问题讨论】：

您的包装器组件上是否有每个 q-select 道具，或者您只是 extending 它？
通过使用v-bind="$attrs"，所有道具都像:rules和dense一样传播
有时依赖 $attrs 可能并不理想，因为它还会绑定任何原生 DOM 属性，除非被 inheritAttrs 禁用。
使用render函数代替模板。

标签： javascript vue.js vuejs2 vue-component quasar-framework

【解决方案1】：

OrganisationSelect 可以提供默认为$t('organisations.label') 的label prop，并将该道具绑定到<q-select>.label：

<template lang="pug">
  q-select(
    ...
    :label="label"
  )
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default() {
        return this.$t('organisations.label')
      }
    }
  }
}
</script>

demo

【讨论】：