itsource

Vue - 래퍼 구성 요소의 프로펠을 재정의하는 방법

mycopycode 2022. 8. 21. 19:56
반응형

Vue - 래퍼 구성 요소의 프로펠을 재정의하는 방법

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이 사용되지 않습니다.항상 내부 라벨을 사용합니다.

질문:.

그런 제안이 우선시 되는 것이 가능한가?만약 그렇다면, 어떻게?

OrganisationSelect를 제공할 수 있습니다.label 디폴트인 프로펠러$t('organisations.label'), 그 소품을 에 바인드 합니다.<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>

데모

언급URL : https://stackoverflow.com/questions/59790086/vue-how-to-override-a-prop-of-a-wrapper-component

반응형