如何用条件检查覆盖 vue 组件道具？

Question

override/extends 组件的推荐方法是什么？例如。我想覆盖 vuetify 组件 VTextField:

<script>
import { VTextField } from 'vuetify/lib/components';

export default {
  name: 'RTextField',
  extends: VTextField,
  props: {
    outlined: {
      default: true,
    },
    hideDetails: {
      default: true,
    },
  },
};
</script>

上面我使用 extends 覆盖了一些默认的 props 值。

我想问一下如何有条件地设置 hideDetails 的值，例如根据特定的属性值 hint，如果 RTextField 中有一个 hint 属性=]，并且 hideDetails 应该设置为 false

`<r-text-field hint="xxx detail description">`

Answer 1

您可以包装 VTextField 而不是扩展，这样您就可以完全控制 props 以及如何将它们转发到包装的组件。

未测试：

<template>
  <v-text-field
    :outlined="outlined"
    :hide-details="$attrs.hint ? false : hideDetails"
    v-bind="$attrs"
    v-on="$listeners"
  />
</template>

import { VTextField } from 'vuetify/lib/components'

export default {
  name: 'RTextField',

  components: {
    VTextField,
  },

  // We'll pass attrs as props via v-bind
  inheritAttrs: false,

  props: {
    outlined: {
      type: Boolean,
      default: true,
    },
    hideDetails: {
      type: Boolean,
      default: true,
    },
  },
}

如何用条件检查覆盖 vue 组件道具？

How to override the vue component props with condition check?

vue.js

vuejs2

vuetify.js