Ярлык атрибута non-prop не работает, в то время как стиль делает

Question

У меня есть пользовательский компонент с именем PasswordInput, определяемый как

<template>
  <v-text-field
    :type="showPassword ? 'text' : 'password'"
    prepend-icon="mdi-lock"
    :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
    @click:append="showPassword = !showPassword"
  />
</template>

<script>
export default {
  data() {
    return {
      showPassword: false
    }
  }
}
</script>

и используемый так

<password-input
  label="Password"
  style="background-color:red"
></password-input>

Однако, хотя стиль передается элементу маршрута, метка не не похоже на работу, как видно здесь,

Answer 1

Привязка все attributes к v-text-field, которые вы применяете к password-input в родительском компоненте.

<v-text-field
 v-bind="$attrs" // <-- Here
 :type="showPassword ? 'text' : 'password'"
 prepend-icon="mdi-lock"
 :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
 @click:append="showPassword = !showPassword"
/>