Vue-如何覆盖包装器组件的道具?

时间:2020-01-17 15:13:45

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

我创建了一个包装器组件,它包装了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 。它始终带有内部标签。

问题:

这样的道具压倒性可能吗?如果是,怎么办?

1 个答案:

答案 0 :(得分:1)

OrganisationSelect可以提供默认为label的{​​{1}} prop,并将该道具绑定到$t('organisations.label')

<q-select>.label

demo